CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

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>

Synes godt om

jakobdo Ekspert

16. april 2016 - 20:54 #1

Hvad med at lave det i css:

text-transform: capitalize;

Synes godt om

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>

Synes godt om

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.)

Synes godt om

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

Synes godt om

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.

Synes godt om

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)

Synes godt om

riefart Seniormester

16. april 2016 - 23:44 #7

Jeg får stadig intet resultat med #4. Ikke det mindste.

Synes godt om

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

Synes godt om

riefart Seniormester

17. april 2016 - 00:31 #9

Den ligger her:
http://riefart.dk/autocomplete.php

Synes godt om

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

Synes godt om

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.

Synes godt om

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

Synes godt om

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

Synes godt om

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.

Synes godt om

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

Synes godt om

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.

Synes godt om

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

Synes godt om

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

Synes godt om

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.

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Sæt vindue størrelse Af poulmadsen i JavaScript	1	08/10/202417:18	13/10/202412:33
Opgavestyring Af ingeman i JavaScript	1	15/09/202416:06	15/09/202420:40
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS