Søg
Avatar billede dnm Nybegynder
18. februar 2003 - 19:22 Der er 15 kommentarer

textfield autocomplete

Kan man på en html/asp/javascript hjemmeside lave en autocomplete textfield som autocompleter ud fra en table i en database???
Avatar billede mortrr Praktikant
18. februar 2003 - 19:34 #1
Jo, men i praksis er en fuld autocomplete ikke særligt praktisk, da det tager for lang tid at hente data.

Men se fx mit indlæg her:
http://www.eksperten.dk/spm/318339
som beskriver hvordan man kan fylde en dropdown.
Samme funktionalitet kan bruges til at lave en autocomplete.
Avatar billede olebole Juniormester
18. februar 2003 - 23:06 #2
<ole>

Nej, det behøver nu ikke tage så lang tid - hvis blot det
skal virke i IE.
Prøv at læse på MS' sider om JScript, DHTML, databinding og recordset. Der kan du garanteret finde noget, du kan bruge  ;o)

/mvh
</bole>
Avatar billede mortrr Praktikant
18. februar 2003 - 23:52 #3
Det fungerer skam også fint på en ordentligt opsat server, og jeg bruger det også selv til en del løsninger med opslag i store mængder data.

Og til en dropdown er det glimrende.

Men prøv at tænk på de svartider du ofte oplever på sites rundt omkring.
Med en autocomplete nytter der jo ikke at der går bare 2 sekunder fra du skriver noget, til der sker noget.

Så derfor mine forbehold.

- Morten
Avatar billede olebole Juniormester
19. februar 2003 - 00:04 #4
Jamen, det er jo netop derfor, jeg foreslår det, jeg gør. Så undgår du lange svartider.
At mange af de sites, hvor jeg ofte oplever lange svartider, er skrevet frygtelig dårligt og bruger håbløse løsninger, er en hel anden sag  ;o)
/mvh
Avatar billede mortrr Praktikant
19. februar 2003 - 00:25 #5
Men, som du siger - det virker absolut kun i IE.
Og det ændrer ikke problemet med et webhotels svartid ved opslag i en overbelastet database.

Desværre

- Morten
Avatar billede olebole Juniormester
19. februar 2003 - 00:27 #6
Der er jo ingen, der siger, du nødvendigvis skal tilbage på serveren.

Heldigvis  :)

/mvh
Avatar billede mortrr Praktikant
19. februar 2003 - 00:44 #7
Nah - men jeg har altså ikke for vane at smide et par 100 k data ud til en bruger der ikke har bedt om andet end en mulighed for slå et gadenavn op.

- Morten
Avatar billede olebole Juniormester
19. februar 2003 - 00:48 #8
Hvor får du tallet 100k fra? Hvor meget står der i spørgerens tabel?
Jeg ved det ikke - men du synes at sidde inde med yderligere info. Hvorfor deler du ikke 'hemmeligheden' med os?  :)
/mvh
Avatar billede mortrr Praktikant
19. februar 2003 - 00:59 #9
Eksempel. Jeg aner det heller ikke.
Kunne også have sagt 1MB. Det lød bare så overdrevet, hvis det kun er et felt.
(Undtagen hvis det er en telefontavle i et amt fx)

Men hvorfor ellers "lave en autocomplete textfield som autocompleter ud fra en table i en database", hvis man ikke har mange data?

Og fordi jeg engang imellem elsker at kværulere.

- Morten
Avatar billede olebole Juniormester
19. februar 2003 - 01:10 #10
Sålænge vi ikke ved, hvad det er, brugeren skal bruge og kender hans datamængde/-struktur, finder jeg diskutionen lettere tåbelig  :)
/mvh
Avatar billede mortrr Praktikant
19. februar 2003 - 01:21 #11
Dejlig.

Så føler jeg mig mindre deprimeret over at jeg ikke fik set et afsnit af futurama til aften.
Avatar billede hnteknik Novice
23. april 2003 - 15:04 #12
Er jeg sent på den - er det sådan en autokompleter, du er ude efter.
Eksemplet læser for nemheds skyld ikke ind fra en tabel. Du kan også lægge indlæsningen i en array og slippe for dropdownen ( jeg skal lige have den til at se bort fra Uppercase) - Henrik:

<HTML>
<HEAD>
<TITLE>AutoComplete</TITLE>
</HEAD>
<BODY>
<SCRIPT>
function matchFieldSelect (field, select, value) {
  var property = value ? 'value' : 'text';
  var found = false;
  for (var i = 0; i < select.options.length; i++)
    if ((found = select.options[i][property].indexOf(field.value) ==0))
      break;
  if (found)
    select.selectedIndex = i;
  else
    select.selectedIndex = -1;
  if (field.createTextRange) {
    var cursorKeys ="8;46;37;38;39;40;33;34;35;36;45;"
    if (cursorKeys.indexOf(event.keyCode+";") == -1) {
      var r1 = field.createTextRange()
      var oldValue = r1.text;
      var newValue = found ? select.options[i][property] : oldValue;
      if (newValue != field.value) {
        field.value = newValue
        var rNew = field.createTextRange()
        rNew.moveStart('character', oldValue.length)
        rNew.select()
      }
    }
  }
}

</SCRIPT>


<FORM NAME="aForm">
<strong>Kategori</strong>&nbsp;
<INPUT TYPE="text" NAME="cat"
      ONKEYUP="matchFieldSelect(this, this.form.cats)"
>
<SELECT NAME="cats"
        ONCHANGE="this.form.cat.value = this.options
[this.selectedIndex].text"
>
<option value=""></option><option value="1">Akupunktur</option><option value="3">Auto - Udstyr</option><option value="2">Bad</option><option value="5">Byggemarked</option><option value="6">Børnetøj</option><option value="7">Cykler</option><option value="8">Diverse</option><option value="9">El</option><option value="10">Farvehandlere</option><option value="11">Foto</option><option value="12">Frisører</option><option value="13">Glarmester</option><option value="14">Guld, sølv og ure</option><option value="15">Havemøbler</option><option value="16">Hårde hvidevarer</option><option value="17">Isenkram</option><option value="18">Kontorartikler/møbler</option><option value="19">Kosmetologer</option><option value="20">Køkkener</option><option value="21">Lamper</option><option value="22">Lystfiskeri</option><option value="23">Lædervarer</option><option value="24">Malere</option><option value="25">Møbler</option><option value="26">Optikere</option><option value="27">Pejse og Bændeovne</option><option value="28">Radio - TV</option><option value="29">Rammer/Billeder</option><option value="30">Revisorer</option><option value="31">Solcentre</option><option value="32">Sommerhuse</option><option value="33">Sportsartikler</option><option value="34">Stoffer og gardiner</option><option value="35">Symaskiner</option><option value="36">Tæpper</option><option value="37">Tøj</option><option value="38">Udestuer/vinterhaver</option><option value="39">Vin og Spiritus</option><option value="40">Vinduer</option><option value="41">Zoneterapi</option>
</SELECT><BR>
<strong>Postnr</strong>&nbsp;&nbsp;&nbsp;&nbsp;
<INPUT TYPE="text" NAME="postnr"
      ONKEYUP="matchFieldSelect(this, this.form.postnrs)"
>
<SELECT NAME="postnrs"
        ONCHANGE="this.form.postnr.value = this.options
[this.selectedIndex].text"
>
<option value=""></option><option value="1302">1302 København K</option><option value="1307">1307 København K</option><option value="1320">1320 København K</option><option value="1366">1366 København K</option><option value="1400">1400 København K</option><option value="1600">1600 København V</option><option value="1610">1610 København V</option><option value="1620">1620 København V</option><option value="1670">1670 København V</option><option value="1800">1800 Frederiksberg C</option><option value="1850">1850 Frederiksberg C</option><option value="1950">1950 Frederiksberg C</option><option value="1958">1958 Frederiksberg C</option><option value="2000">2000 Frederiksberg</option><option value="2100">2100 København Ø</option><option value="2200">2200 København N</option><option value="2300">2300 København S.</option><option value="2400">2400 København NV</option><option value="2500">2500 Valby</option><option value="2600">2600 Glostrup</option><option value="2605">2605 Brøndby</option><option value="2610">2610 Rødovre</option><option value="2620">2620 Albertslund</option><option value="2630">2630 Taastrup</option><option value="2650">2650 Hvidovre</option><option value="2670">2670 Greve</option><option value="2700">2700 Brønshøj</option><option value="2720">2720 Værløse</option><option value="2730">2730 Herlev</option><option value="2750">2750 Ballerup</option><option value="2791">2791 Dragør</option><option value="2800">2800 Lyngby</option><option value="2820">2820 Gentofte</option><option value="2830">2830 Virum</option><option value="2860">2860 Søborg</option><option value="2900">2900 Hellerup</option><option value="2970">2970 Hørsholm</option><option value="2980">2980 Hørsholm</option><option value="3310">3310 Ølsted</option><option value="3400">3400 Hillerød</option><option value="3450">3450 Allerød</option><option value="3460">3460 Birkerød</option><option value="3520">3520 Farum</option><option value="3540">3540 Lynge</option><option value="4000">4000 Roskilde</option><option value="5000">5000 Odense C</option><option value="5220">5220 Odense SØ</option><option value="5550">5550 Langeskov</option><option value="5672">5672 Broby</option><option value="5690">5690 Tommerup</option><option value="6000">6000 Kolding</option><option value="6700">6700 Esbjerg</option><option value="7100">7100 Vejle</option><option value="7490">7490 Avlum</option><option value="7800">7800 Skive</option><option value="8000">8000 Århus C</option><option value="8420">8420 Knebel</option><option value="9999">9999 Internettet</option>
</SELECT><BR>
<strong>Navn</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<INPUT TYPE="text" NAME="navn"
      ONKEYUP="matchFieldSelect(this, this.form.navne)"
>
<SELECT NAME="navne"
        ONCHANGE="this.form.navn.value = this.options
[this.selectedIndex].text"
>
<option value=""></option><option value="42">3 Bjørne</option><option value="117">3 Bjørne</option><option value="133">A.H. Vinimport</option><option value="69">A/S Martin Hansen</option><option value="32">ABC-FLISER</option><option value="87">Agerbo Møbler</option><option value="130">Alsinger ApS</option><option value="110">Art & Frame</option><option value="2">Autohuset Hørsholm</option><option value="74">AZ Isenkram</option><option value="104">B & O-center</option><option value="11">Ballerup Dinitrolcenter</option><option value="43">Balling Storkøb</option><option value="119">Birch Trading</option><option value="26">Blomsterbørn</option><option value="3">Borka Autodele Aps.</option><option value="88">Brdr. Friis Møbler</option><option value="93">Brillekompaniet</option><option value="94">BrilleMageren</option><option value="12">Bruhn's biler</option><option value="13">Børco Autodele</option><option value="54">Capelli</option><option value="51">Chagall No 2</option><option value="29">Cykelmyggen</option><option value="14">D&C Rustbeskyttelsescenter</option><option value="103">Dahlstrøm Center aps</option><option value="132">Dahlstrøm Center aps.</option><option value="127">Denal</option><option value="4">Dragør Akupunkturklinik</option><option value="65">Duksrevo ApS.</option><option value="35">Duvall Danmark ApS</option><option value="95">E. Bendtsen I/S</option><option value="44">Emdrup Farve Center / Supermal</option><option value="16">Ena Autoradio</option><option value="105">Ena Radio's eftf.</option><option value="123">Fabrikkernes Tæppelager</option><option value="73">Fagmandens Hvidevarer</option><option value="81">Fagmandens Hvidevarer</option><option value="122">Farve- og Tæppehandel</option><option value="124">Frederiksberg Tæpper</option><option value="68">Fyns Service Center</option><option value="55">Glarmester Glasservice</option><option value="17">GTS Anti Rustcenter</option><option value="121">H. Egelund</option><option value="96">Hans Laursen</option><option value="89">Hass & Berg Poulsen</option><option value="120">Havlund Indretning</option><option value="126">Havlund Indretning</option><option value="56">HEPA Urimport</option><option value="18">Hjulcentret</option><option value="19">Hvidovre Anti Rust Center aps</option><option value="116">Hvidovre Sport</option><option value="47">Hvidtfeldt Farveland</option><option value="125">Hvidtfeldt Farveland</option><option value="90">I.B.K. Møbler A/S</option><option value="58">J.P. Keldorfs Eftf.</option><option value="70">JKE Design</option><option value="79">JKE Design</option><option value="15">Jørgen Dawall Aps.</option><option value="134">Kanavin</option><option value="37">KOMETH & COMPANY A/S</option><option value="40">Kowis Farver & Lakker</option><option value="106">KT Radio</option><option value="107">KT-Radio Odense A/S</option><option value="41">Københavns  Farve- og Tapetmagasin</option><option value="72">Københavns Hvidevarehandel</option><option value="80">Køkken Huset</option><option value="67">Køkken Studio</option><option value="78">Køkken Studio</option><option value="27">Langebro Cykler</option><option value="20">Lundberg Autoværksted</option><option value="21">Lyngby Autocenter</option><option value="49">Lyngby Billedcenter</option><option value="53">Lyngby Hair & Beautyclinic</option><option value="113">Lyngby Sol & Hudpleje</option><option value="97">Lyngby Specialoptik</option><option value="1">Lyngby Tømmerhandel</option><option value="39">Lønborg El</option><option value="71">Løvenkjær A/S</option><option value="83">Løvenkjær A/S</option><option value="86">Maler Hansen</option><option value="22">Mazda / ved Ebbe Elmer</option><option value="30">MC Cykler v/ Fl. Heinrich</option><option value="114">Mols Bjerge Hotel og Feriecenter</option><option value="31">MP Cycles</option><option value="34">MSC Danmark</option><option value="76">Office World - ALTIKON</option><option value="128">Ormstrup</option><option value="25">PA byggemiljø</option><option value="82">PA Byggemiljø</option><option value="101">PA Byggemiljø</option><option value="131">PA Byggemiljø</option><option value="135">PA Byggemiljø</option><option value="100">Paludan Optik</option><option value="57">Palæet</option><option value="129">Pashmina Collections</option><option value="102">Pejse-Centret i/s</option><option value="52">perm. behandling (incl klip)</option><option value="63">Poul Klarlund</option><option value="48">Refflings Foto</option><option value="111">Revisionsfirmaet Woiremose & partner</option><option value="108">Rosendal Radio & TV Aps</option><option value="5">Rødovre Anti Rust Center Aps.</option><option value="136">Rødovre Zoneterapi</option><option value="45">Sadolin</option><option value="46">Sadolin Farveland</option><option value="66">Service Ringen</option><option value="77">Silver Solcenter</option><option value="112">Silver Solcenter</option><option value="38">Sjællandske Familielandbrug</option><option value="118">Skaaning Sport</option><option value="59">Skov Larsen A/S</option><option value="84">Sport Dres</option><option value="60">Storm Pallesen Aps.</option><option value="61">Søbirk</option><option value="98">Søborg Brillecenter</option><option value="62">Sølvform</option><option value="33">Søren Søgaard A/S</option><option value="50">Tang Foto</option><option value="85">Tean Trading</option><option value="92">Tidens Bolig</option><option value="75">Tofte Kontorcenter</option><option value="91">Tofte Kontorcenter</option><option value="9">Torben Donazky</option><option value="24">Toyota</option><option value="28">Urania Cykler</option><option value="99">Vanløse Optik</option><option value="64">Vanløse Ure Bidstrup</option><option value="6">Vinhuset Millesime</option><option value="36">Vupti - et virtuelt varehus</option><option value="115">White Sport</option><option value="109">WR Radio & TV</option>
</SELECT><BR>

</FORM>
</BODY>
</HTML>
Avatar billede hnteknik Novice
23. april 2003 - 15:12 #13
Og Uppercase er klaret her:

    if ((found = select.options[i][property].toUpperCase().indexOf(field.value.toUpperCase()) ==0))
Avatar billede hnteknik Novice
05. februar 2004 - 14:04 #14
Status ???
Avatar billede hnteknik Novice
01. april 2004 - 09:49 #15
? - luk sagen
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
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
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 21/08/202610:41
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
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
04/0918:50 Slet lokal konto Af ErikHg i Windows
04/0916:05 Ændre tal i en celle Af xvid i Excel
04/0913:47 Dette er ikke en kommerciel session i Windows 11 Af eksmojo i Windows
31/0810:26 Synkronisering af kalender mellem computer, android telefon og iPhone Af Strawberry i Andre onlineløsninger
31/0810:24 Kan Excel selv beregne alder? Af leahcim i Excel
White papers
Flere white papers »