CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
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
Den ligger her:
http://riefart.dk/autocomplete.php
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

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
Disable button efter 1. klik Af nemlig i JavaScript 2 05/05/202415:37 05/05/202416:25
Beregning af sum via PHP og SQL Af dane022 i JavaScript 3 10/02/202421:38 12/02/202409:41
Kode der tjekker telefonnummer i formular Af Asky i JavaScript 2 27/12/202321:42 28/12/202314:41
Nogle af mine formularer i PHP er plaget af spam Af Asky i JavaScript 12 19/12/202313:31 10/01/202411:04
Vis data fra en anden fil i en div Af EveryMA i JavaScript 2 19/10/202307:02 20/10/202307:02
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester



Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 21:43 i En Access rapport Af pouls i Access
I går 18:37 windows tablet står på en anden adresse Af jpc1 i Andet software
09/0517:49 iCal-feed og import til google kalender driller Af nemlig i PHP
08/0513:47 Virker vores webshop troværdig? Noget der skal ændres? Af jonaslo98 i Webdesign
08/0513:16 Få excel til at indsætte værdi i månedsfelter ud fra start og stop dato Af CBH i Excel
White papers
Flere white papers »


Premium
Teaser billede
KL jubler over regeringens indtog i Chromebook-sagen: Vigtig deadline er på plads
Læs mere »
CFCS: Cybertruslen mod sundhedsvæsenet bliver værre og værre
2,7 millioner medlemmer kan ikke få udbetalt tilskud: Nyt it-system lukker Sygeforsikring Danmark helt ned i to uger
USA vil blokere for avanceret AI-software til Kina: Der er dog et lille problem
Se alle »
Computerworld
Teaser billede
Mød det tyndeste Apple-produkt nogensinde: Klar med en hel stribe af iPad-nyheder
Læs mere »
Kontorer er ofte øde og tomme - især efter frokost og op til ferier: Nu vil Dell give de ansatte farve-stempler efter deres fremmøde
Guide: Sådan surfer du under hackernes radarer – via en VPN-forbindelse
Danoffice IT overtager næsten 30 år gammelt københavnsk konsulenthus med 35 medarbejdere
Se alle »
CIO
Teaser billede
Her er de bedste Microsoft-partnere i Danmark – mere end 30 selskaber kæmper om priser til årets Partner Awards
Læs mere »
Sådan har Topsoe rullet AI ud til 2.700 medarbejdere: Fik 158 forslag til konkrete AI-projekter - udvalgte 15 pilotprojekter
2,7 millioner medlemmer kan ikke få udbetalt tilskud: Nyt it-system lukker Sygeforsikring Danmark helt ned i to uger
Microsoft på vej med redningskrans til brugere af gammel version af SQL Server
Se alle »
Job & Karriere
Teaser billede
Her er Danmarks fem bedste CIO’er lige nu: Se de fem nominerede til prisen som Årets CIO 2024
Læs mere »
Knap 40 procent af disse it-folk tjener tjener mindst 57.000 kroner om måneden
Medarbejderne fik udleveret badetøfler ved indflytningen: Kom med inden for i IBM Danmarks nye topmoderne hovedkontor
Så meget tjener dine kollegaer: Her er alle data fra Computerworlds store it-lønstatistik for 2024
Se alle »
White paper
Teaser billede
Guide: Sådan udvikler du en moderne netværksstrategi
Læs mere »
Cybersikkerhed: Skær antallet af alarmer ned fra tusindvis til blot en håndfuld
SASE: Træf det rette valg – første gang
Unbreakable - sådan sikrer du dig vedvarende og uafbrudt adgang til dine data
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »