Avatar billede riefart Seniormester
16. april 2016 - 20:23 Der er 18 kommentarer og
1 løsning

Uppercase på første ord.

I nedenstående autosuggest-funktion skal jeg have det første bogstav angivet med stort. Det er ikke sikkert at alle gør det, så jeg vil gerne kunne lave en uppercase.
Kan bare ikke lige få det til at spille.
Kan nogen hjælpe?

<script>   
var input = document.querySelector("input[name=kommer_fra]");
autoComplt.enable(input, {
    hintsFetcher : function (v, openList) {
        var hints = [],
            names = [ "Andorra", "Azerbaijan", "Bahamas", "Bahrain", "Benin", "Bhutan", "Bolivia", "Bosnia" ];

        for (var i = 0; i < names.length; i++) {
            if (names[i].indexOf(v) >= 0) {
                hints.push(names[i]);
            }
        }
        openList(hints);
    }
});
</script>
Avatar billede jakobdo Ekspert
16. april 2016 - 20:54 #1
Hvad med at lave det i css:

text-transform: capitalize;
Avatar billede olsensweb.dk Ekspert
16. april 2016 - 20:55 #2
har du prøvet at google https://www.google.dk/search?q=js+uppercase+first+letter ??
ref http://stackoverflow.com/questions/1026069/capitalize-the-first-letter-of-string-in-javascript

function capitalise(string) {
    return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
}
capitalise("alfredo")  // => "Alfredo"
capitalise("Alejandro")// => "Alejandro
capitalise("ALBERTO")  // => "Alberto"
capitalise("ArMaNdO")  // => "Armando"

men læs også de alternative forslag med spped test
If you're interested in the performance of a few different methods posted:
sammem sted


ref http://snipplr.com/view/43670/

function ucFirst(string) {
    return string.substring(0, 1).toUpperCase() + string.substring(1).toLowerCase();
}



(utested)

<script>   

function ucFirst(string) {
    return string.substring(0, 1).toUpperCase() + string.substring(1).toLowerCase();
}

var input = document.querySelector("input[name=kommer_fra]");
autoComplt.enable(input, {
    hintsFetcher : function (v, openList) {
        var hints = [],
            names = [ "Andorra", "Azerbaijan", "Bahamas", "Bahrain", "Benin", "Bhutan", "Bolivia", "Bosnia" ];

        for (var i = 0; i < names.length; i++) {
            if (names[i].indexOf(v) >= 0) {
                str = ucFirst(names[i]);
                hints.push(str);

            }
        }
        openList(hints);
    }
});
</script>
Avatar billede riefart Seniormester
16. april 2016 - 21:19 #3
Jeg har faktisk været omkring både css, Google og har også prøvet det forslag ronol kommer med. Jeg får det bare ikke til at virke.
Hvordan laver jeg kaldet til funktionen fra feltet:
<input type="text" name="kommer_fra" id="kommer_fra"  />
mens det er under udfyldelse?
(javascriptet er placeret under input-feltet.)
Avatar billede olsensweb.dk Ekspert
16. april 2016 - 21:32 #4
prøv at sætte functionen på dit input også

<script>   

function ucFirst(string) {
    return string.substring(0, 1).toUpperCase() + string.substring(1).toLowerCase();
}

var input = document.querySelector("input[name=kommer_fra]");
input = ucFirst(input);
autoComplt.enable(input, {
    hintsFetcher : function (v, openList) {
        var hints = [],
            names = [ "Andorra", "Azerbaijan", "Bahamas", "Bahrain", "Benin", "Bhutan", "Bolivia", "Bosnia" ];

        for (var i = 0; i < names.length; i++) {
            if (names[i].indexOf(v) >= 0) {
                str = ucFirst(names[i]);
                hints.push(str);
            }
        }
        openList(hints);
    }
});
</script>



mens det skrives burde det kunne laves med CSS som jakobdo forslår

<style type="text/css">
    input[name=kommer_fra] {   
    text-transform:capitalize;
    }
</style>

eller man kunne sætte en class på indput feltet i html eller give den et ID som man styler
Avatar billede riefart Seniormester
16. april 2016 - 22:49 #5
Uden funktionen men med style på formfeltet:
<input type="text" name="kommer_fra" id="kommer_fra"  style="text-transform:capitalize;" />

<script> 
var input = document.querySelector("input[name=kommer_fra]");
autoComplt.enable(input, {
    hintsFetcher : function (v, openList) {
        var hints = [],
            names = [ "Andorra", "Azerbaijan", "Bahamas", "Bahrain", "Benin", "Bhutan", "Bolivia", "Bosnia" ];

        for (var i = 0; i < names.length; i++) {
            if (names[i].indexOf(v) >= 0) {
                hints.push(names[i]);
            }
        }
        openList(hints);
    }
});
</script>

bliver første bogstav korrekt printet med stort. Og der vises både "Andorra" og "Azerbaijan". Men så snart jeg taster "z" efter "A" forsvinder også "Azerbaijan" fra listen.
Hvis jeg gøre uden style'n forbliver "Azerbaijan" på listen. Mærkeligt.
Avatar billede olsensweb.dk Ekspert
16. april 2016 - 23:06 #6
det du skriver i dit input felt
<input type="text" name="kommer_fra" id="kommer_fra"  style="text-transform:capitalize;" />
vil vedblive den style du har skrevet dit i, det laver CSS ikke om på
så skriver du aZerbAijan i input får du vist Azerbaijan (grundet CSS), men det der læsses af JS er aZerbAijan, derfor functionen i JS.


så du kan nok ikke undvære functionen, men sikkert nok style

så mit bud er brug det js der er vist i #4 (utested)
Avatar billede riefart Seniormester
16. april 2016 - 23:44 #7
Jeg får stadig intet resultat med #4. Ikke det mindste.
Avatar billede olsensweb.dk Ekspert
17. april 2016 - 00:07 #8
prøv at lave en simpel test side og læg den op, så vi kan se den code du arbejder med
Avatar billede riefart Seniormester
17. april 2016 - 00:31 #9
Avatar billede olsensweb.dk Ekspert
17. april 2016 - 12:22 #10
ja så kom forklaringen på hvor autoComplt.enable kom fra

jeg har omdøbt variablen input til input_ for at undgå problemenr med evt reseveret ord / tag
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
            input[name=kommer_fra] {   
                text-transform:capitalize;
            }
        </style>
    </head>
    <body>
        <input type="text" name="kommer_fra" placeholder="Please key in some text.">
        <script type="text/javascript" src="src/autoComplt.js"></script>
        <script>
            /*
            function ucFirst(string) {
            return string.substring(0, 1).toUpperCase() + string.substring(1).toLowerCase();
            }
            */
            ucFirst = function (string) {
                return string.substring(0, 1).toUpperCase() + string.substring(1).toLowerCase();
            };

            hintsFetcher = function (v, openCallback) {
                var hints = [];
                var words = [
                    "Abyssinian", "atest", "Ainu Dog", "Alligator", "Barb", "Bloodhound",
                    "Chinook", "Cougar", "Dingo", "Dormouse", "Earwig",
                    "Emperor Tamarin", "Falcon", "Fennec Fox", "Gecko", "German Shepherd",
                    "Hammerhead Shark", "Hermit Crab", "Iguana", "Javan Rhinoceros", "Lion"
                ];
                for (i = 0; i < words.length; i++) {
                    if (words[i].indexOf(v) >= 0 || v.search(words[i]) >= 0) {
                        hints.push(ucFirst(words[i]));
                    }
                }
                openCallback(hints);
            };
            var input_ = document.querySelector("input[name=kommer_fra]");
            autoComplt.enable(input_);
            input_.autoComplt.setHintsFetcher(hintsFetcher);
        </script>
    </body>
</html>

demo http://experten.olsensweb.dk/1010260/


oprindelig code taget fra
https://github.com/Fischer-L/autoComplt/blob/master/index.html

hele oprindelig projected kan hentes fra
https://github.com/Fischer-L/autoComplt/archive/master.zip
indeholder også autoComplt.js
Avatar billede riefart Seniormester
17. april 2016 - 12:39 #11
Hej ronols.
Når jeg prøver din demo på http://experten.olsensweb.dk/1010260/
Så gør det samme sig gældende, som jeg skrev i #7.
Alt indeholdende "b" kommer frem ved at skrive lille-b, og alt forsvinder når jeg tilføjer "a". Kun hvis jeg taster stort-B vedbliver eks "Barb" at være synlig i oversigten.
Avatar billede olsensweb.dk Ekspert
17. april 2016 - 13:31 #12
#11
du tilføjer bare toLowerCase() i sammenligningen

så dette
 

for (i = 0; i < words.length; i++) {
    if (words[i].indexOf(v) >= 0 || v.search(words[i]) >= 0) {
        hints.push(ucFirst(words[i]));
    }
}
[/pre][/div]

skal se sådan ud
 
for (i = 0; i < words.length; i++) {
    if (words[i].toLowerCase().indexOf(v) >= 0 || v.search(words[i]) >= 0) {
        hints.push( ucFirst(words[i]) );
    }
}


demo opdateret
Avatar billede olsensweb.dk Ekspert
17. april 2016 - 13:34 #13
og her ville det være rart lige at kunne rette sit indlæg, bb code fejl
Avatar billede riefart Seniormester
17. april 2016 - 14:55 #14
Hej Ronols. Tak fordi du kæmper. Nu virker det helt fint med at taste små bogstaver. Men det virker ikke hvis folk nu er så dygtige, at de husker at egenavne skal med stort-så er jeg slået hjem igen.
Avatar billede olsensweb.dk Ekspert
17. april 2016 - 20:18 #15
prøv med denne function
sammenligning sker nu helt uden case
derfor toLowerCase() 2 gange i denne linje
if(words[i].toLowerCase().indexOf(v.toLowerCase() ) > -1){

dvs referance ordet, og det indtasted ord

hvis det er dette du ønsker skal den bare optimeres


hintsFetcher = function (v, openCallback) {                                               
    var words = [
        "Abyssinian", "atest", "Ainu Dog", "Alligator", "Barb", "Bloodhound",
        "Chinook", "Cougar", "Dingo", "Dormouse", "Earwig",
        "Emperor Tamarin", "Falcon", "Fennec Fox", "Gecko", "German Shepherd",
        "Hammerhead Shark", "Hermit Crab", "Iguana", "Javan Rhinoceros", "Lion"
    ];               
    var hints = [];
    for (var i = 0, lng = words.length; i < lng; i++) {
        if(words[i].toLowerCase().indexOf(v.toLowerCase() ) > -1){
            str = ucFirst(words[i]);
            hints.push(str);
        }
    }
    openCallback(hints);       
};


demo opdateret
Avatar billede riefart Seniormester
17. april 2016 - 20:45 #16
Så lykkedes det. DET VIRKER! Var ude i tanker om noget AJAX i stedet, men fedt, at det kom til at virke.
Tusind tak for hjælpen, Ronny. Smid fluks et svar.
Avatar billede olsensweb.dk Ekspert
17. april 2016 - 21:01 #17
får du her.

den endte med at se sådan ud:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
            input[name=kommer_fra] {   
                text-transform:capitalize;
            }
        </style>
    </head>
    <body>
        <input type="text" name="kommer_fra" value="" placeholder="Please key in some text.">
        <script type="text/javascript" src="autoComplt.js"></script>
        <script>

            ucFirst = function (str) {
                return str.substring(0, 1).toUpperCase() + str.substring(1).toLowerCase();
            };           
                           
            hintsFetcher = function (v, openCallback) {                                               
                var words = [
                    "Abyssinian", "atest", "Ainu Dog", "Alligator", "Barb", "Bloodhound",
                    "Chinook", "Cougar", "Dingo", "Dormouse", "Earwig",
                    "Emperor Tamarin", "Falcon", "Fennec Fox", "Gecko", "German Shepherd",
                    "Hammerhead Shark", "Hermit Crab", "Iguana", "Javan Rhinoceros", "Lion"
                ];               
                var hints = [];
                for (var i = 0, lng = words.length; i < lng; i++) {
                    if(words[i].toLowerCase().indexOf(v.toLowerCase() ) > -1){               
                        str = ucFirst(words[i]);
                        hints.push(str);
                    }
                }
                openCallback(hints);       
            };           
           
            var input_ = document.querySelector("input[name=kommer_fra]");                       
            autoComplt.enable(input_);
            input_.autoComplt.setHintsFetcher(hintsFetcher);
        </script>
    </body>
</html>


så skal det optimeres.

jeg tænker at
1) muligvis ligge words arrayet uden for functionen, men helt sikkert lave alle ord om til lovercase, det er der ikke nogle grund til at gøre inde i loopet

2) ligge v.toLowerCase() ude fra loopet
Avatar billede olsensweb.dk Ekspert
17. april 2016 - 21:08 #18
du kunne også kigge på jquery
https://jqueryui.com/autocomplete/

meget mere simpel, så skal du bare implamenterer ucFirst(string), så er den ged barberet
Avatar billede riefart Seniormester
17. april 2016 - 22:08 #19
Jeg har været omkring Jquery og fandt nogle interessante. Desværre var de allesamme .ui som kolliderede med andre Jquerys som jeg har på siden.
Jeg går i gang med optimering. Tak for hjælpen.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester