Notifikationer

Markér alle som læst Log ud

falslev Nybegynder

10. juni 2004 - 17:23 Der er 19 kommentarer

Funktion til dropdown

Jeg har en lang dropdown menu med 15.000 navne i.
Trykker jeg på P hopper den til starten af P.
Trykker jeg på Pe hopper den til starten af E (fordi det trykkede jeg som det sidste bogstav).

Men jeg søger en funktion hvor jeg kan skrive pet og så hopper den til dem der starter med pet

HJÆLP

Synes godt om

powernodes Nybegynder

10. juni 2004 - 17:31 #1

http://www.phoenixv.dk/arkiv.html --> formularer --> dynamisk select box

Synes godt om

falslev Nybegynder

10. juni 2004 - 17:41 #2

Der kan man bare ikke sende en value med

Synes godt om

yellow Nybegynder

10. juni 2004 - 18:41 #3

Sad og legede lidt med det og fandt frem til følgende:

******************************************************
<script type="text/javascript">
var timeBuffer = 500;
var charString = '';
var timer;

function stickyKeys(oDropdown){
charString += String.fromCharCode(event.keyCode);
window.clearTimeout(timer);
timer = window.setTimeout("setDropdown(" + oDropdown.id + ")",timeBuffer);
return false;
}

function setDropdown(sID){
regExp = new RegExp("^" + charString, "i");
var oDropdown = eval(sID);
for(i=0;i<oDropdown.length;i++){
if( regExp.test( oDropdown[i].value ) ){
oDropdown[i].selected = true;
break;
}
}
charString = '';
}

</script>

<select id="names" onkeydown="return stickyKeys(this)">
<option value="anne">anne</option>
<option value="karl">karl</option>
<option value="kenneth">kenneth</option>
<option value="klaus">klaus</option>
<option value="peter">peter</option>
<option value="sven">sven</option>
</select>
******************************************************

Du kan justere "sensitiviteten" ved at ændre i timeBuffer variablen.
Det kan godt være den bliver lidt "tung" hvis du har 15000 navne, men hvis de er alfabetisk sorterede kan du evt. lave en binær søgning i stedet for den lineære jeg har lavet i eksemplet.

Synes godt om

falslev Nybegynder

10. juni 2004 - 20:20 #4

yellow det virker ikke når det kommer ind i en form

Synes godt om

yellow Nybegynder

10. juni 2004 - 20:39 #5

Et par ændringer (form og select SKAL selvølgelig have en "id"):

<script type="text/javascript">

var timeBuffer = 500;
var charString = '';
var timer;

function stickyKeys(oDropdown){
charString += String.fromCharCode(event.keyCode);
window.clearTimeout(timer);
timer = window.setTimeout("setDropdown('" + oDropdown.form.id + "','" + oDropdown.id + "')",timeBuffer);
return false;
}

function setDropdown(sForm,sID){
regExp = new RegExp("^" + charString, "i");
var oDropdown = eval(sForm + '.' + sID );
for(i=0;i<oDropdown.length;i++){
if( regExp.test( oDropdown[i].value ) ){
oDropdown[i].selected = true;
break;
}
}
charString = '';
}

</script>

<form id="myform">
<select id="names" onkeydown="return stickyKeys(this)">
<option value="anne">anne</option>
<option value="karl">karl</option>
<option value="kenneth">kenneth</option>
<option value="klaus">klaus</option>
<option value="peter">peter</option>
<option value="sven">sven</option>
</select>
</form>

Synes godt om

falslev Nybegynder

10. juni 2004 - 20:49 #6

Den er tæt på men pil tasterne virker ikke

Synes godt om

yellow Nybegynder

10. juni 2004 - 20:57 #7

Okay så :-)

function stickyKeys(oDropdown){
keyCode = String.fromCharCode(event.keyCode);
if( !/[\wæøå]/.test( keyCode ) ){
return true;
}
charString += keyCode;
window.clearTimeout(timer);
timer = window.setTimeout("setDropdown('" + oDropdown.form.id + "','" + oDropdown.id + "')",timeBuffer);
return false;
}

Synes godt om

yellow Nybegynder

10. juni 2004 - 21:04 #8

hmm, den har lidt problemer med æ,ø og å...ser lige på det

Synes godt om

falslev Nybegynder

10. juni 2004 - 21:05 #9

Den virker perfekt nu.
Bare ikke med 15.000 :)

Synes godt om

yellow Nybegynder

10. juni 2004 - 21:05 #10

ok, den er for langsom?

Synes godt om

falslev Nybegynder

10. juni 2004 - 21:07 #11

rører sig slet ikke ud af stedet :)

Synes godt om

yellow Nybegynder

10. juni 2004 - 22:05 #12

Ok, prøv den her. Ved ikke om den stadig er alt for langsom med 15000, men den er i hvert fald logaritmisk i stedet for lineær nu:

<script type="text/javascript">

var timeBuffer = 500;
var charString = '';
var timer;
var regExp;

function stickyKeys(oDropdown){
keyCode = String.fromCharCode(event.keyCode);
if( !/[\wæøå]/i.test( keyCode ) ){
alert('shite');
return true;
}
charString += keyCode;
window.clearTimeout(timer);
timer = window.setTimeout("setDropdown('" + oDropdown.form.id + "','" + oDropdown.id + "')",timeBuffer);
return false;
}

function setDropdown(sForm,sID){
var oDropdown = eval(sForm + '.' + sID );
regExp = new RegExp("^" + charString, "i");
binarySearch(oDropdown,charString.toLowerCase(),0,oDropdown.length-1)
charString = '';
}

function binarySearch( oDropdown, sCompare, low, high ){
mid = parseInt( (low+high)/2 );
if( regExp.test( oDropdown[mid].value ) ){
oDropdown[mid].selected = true;
}
if( low==high ){
return;
}
else if(oDropdown[mid].value.toLowerCase() < sCompare ){
binarySearch( oDropdown, sCompare, mid+1, high );
}
else{
binarySearch( oDropdown, sCompare,low,mid);
}
}

</script>

<form id="myform">
<select id="names" onkeydown="return stickyKeys(this)">
<option value="anne">anne</option>
<option value="bent">bent</option>
<option value="karl">karl</option>
<option value="kenneth">kenneth</option>
<option value="klaus">klaus</option>
<option value="peter">peter</option>
<option value="sven">sven</option>
<option value="zerko">zerko</option>
</select>
</form>

Synes godt om

yellow Nybegynder

10. juni 2004 - 22:07 #13

ups, smid en return ind her:

if( regExp.test( oDropdown[mid].value ) ){
oDropdown[mid].selected = true;
return; //<---her
}

Synes godt om

yellow Nybegynder

10. juni 2004 - 22:08 #14

ahem, og fjern alert('shite'); ;-)

Den har stadig probs med æ,ø,å dog :(

Synes godt om

yellow Nybegynder

11. juni 2004 - 00:28 #15

Ok, det tog lidt overhånd, men de der æøå-problemer irriterede mig.
Har lavet en version der fungerer med et dansk keyboard i hvert fald.
Testet med 15000+ options.

<script type="text/javascript">

var timeBuffer = 500;
var charString = '';
var timer;
var regExp;

function stickyKeys(oDropdown){
keyCode = event.keyCode;
if( !((keyCode>=60 && keyCode<=90)||keyCode==192||keyCode==222||keyCode==221) ){
return true;
}
switch (keyCode){
case 192 :
charString += "Æ";
break
case 222 :
charString += "Ø";
break
case 221 :
charString += "Å";
break
default :
charString += String.fromCharCode(keyCode);
}
window.clearTimeout(timer);
timer = window.setTimeout("setDropdown('" + oDropdown.form.id + "','" + oDropdown.id + "')",timeBuffer);
return false;
}

function setDropdown(sForm,sID){
var oDropdown = eval(sForm + '.' + sID );
regExp = new RegExp("^" + charString, "i");
binarySearch(oDropdown,charString.toLowerCase(),0,oDropdown.length-1)
charString = '';
}

function binarySearch( oDropdown, sCompare, low, high ){
mid = parseInt( (low+high)/2 );
if( regExp.test( oDropdown[mid].value ) ){
oDropdown[mid].selected = true;
return;
}
if( low==high ){
return;
}
else if( stringCompare(sCompare,oDropdown[mid].value.toLowerCase()) ){
binarySearch( oDropdown, sCompare, mid+1, high );
}
else{
binarySearch( oDropdown, sCompare,low,mid);
}
}

function stringCompare( str1, str2 ){
var dkAlphabet = "abcdefghijklmnopqrstuvwxyzæøå";
var minLength = (str1.length<=str2.length)?str1.length:str2.length;
for(i=0;i<minLength;i++){
char1 = dkAlphabet.indexOf( str1.charAt(i));
char2 = dkAlphabet.indexOf( str2.charAt(i));
if( char1 > char2 ) return true;
if( char1 < char2 ) return false;
}
return str1.length > str2.length;
}

</script>

<form id="myform">
<select id="names" onkeydown="return stickyKeys(this)">
<option value="anne">anne</option>
<option value="bent">bent</option>
<option value="bjarne">bjarne</option>
<option value="karl">karl</option>
<option value="kenneth">kenneth</option>
<option value="klaus">klaus</option>
<option value="peter">peter</option>
<option value="sven">sven</option>
<option value="zerko">zerko</option>
<option value="ælling">ælling</option>
<option value="østers">østers</option>
<option value="åse">åse</option>
</select>
</form>

Synes godt om

yellow Nybegynder

11. juni 2004 - 00:30 #16

Lidt finpudsning:

<script type="text/javascript">

var timeBuffer = 500;
var charString = '';
var timer;
var regExp;

function stickyKeys(oDropdown){
keyCode = event.keyCode;
if( !((keyCode>=60 && keyCode<=90)||keyCode==192||keyCode==222||keyCode==221) ){
return true;
}
switch (keyCode){
case 192 :
charString += "Æ";
break
case 222 :
charString += "Ø";
break
case 221 :
charString += "Å";
break
default :
charString += String.fromCharCode(keyCode);
}
window.clearTimeout(timer);
timer = window.setTimeout("setDropdown('" + oDropdown.form.id + "','" + oDropdown.id + "')",timeBuffer);
return false;
}

function setDropdown(sForm,sID){
var oDropdown = eval(sForm + '.' + sID );
regExp = new RegExp("^" + charString, "i");
binarySearch(oDropdown,charString.toLowerCase(),0,oDropdown.length-1)
charString = '';
}

function binarySearch( oDropdown, sCompare, low, high ){
mid = parseInt( (low+high)/2 );
if( regExp.test( oDropdown[mid].value ) ){
oDropdown[mid].selected = true;
return;
}
if( low==high ){
return;
}
else if( stringCompare(sCompare,oDropdown[mid].value.toLowerCase()) ){
binarySearch( oDropdown, sCompare, mid+1, high );
}
else{
binarySearch( oDropdown, sCompare,low,mid);
}
}

function stringCompare( str1, str2 ){
var dkAlphabet = "abcdefghijklmnopqrstuvwxyzæøå";
var minLength = (str1.length<=str2.length)?str1.length:str2.length;
for(i=0;i<minLength;i++){
char1 = dkAlphabet.indexOf( str1.charAt(i));
char2 = dkAlphabet.indexOf( str2.charAt(i));
return char1 > char2;
}
return str1.length > str2.length;
}

</script>

<form id="myform">
<select id="names" onkeydown="return stickyKeys(this)">
<option value="anne">anne</option>
<option value="bent">bent</option>
<option value="bjarne">bjarne</option>
<option value="karl">karl</option>
<option value="kenneth">kenneth</option>
<option value="klaus">klaus</option>
<option value="peter">peter</option>
<option value="sven">sven</option>
<option value="zerko">zerko</option>
<option value="ælling">ælling</option>
<option value="østers">østers</option>
<option value="åse">åse</option>
</select>
</form>

Synes godt om

yellow Nybegynder

11. juni 2004 - 00:32 #17

Ok, det er vist blevet for sent nu - jeg roder rundt i det.
Glem den finpudsningsversion.
Brug versionen fra 11/06-2004 00:28:07

Godnat :-)

Synes godt om

falslev Nybegynder

15. juni 2004 - 09:18 #18

Jeg har ikke glemt dig Yellow.
Kigger på det hurtigst muligt.

Synes godt om

yellow Nybegynder

02. august 2004 - 10:19 #19

bump

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
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript	5	27/04/202620:09	03/05/202613:59
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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS