TapeGun007 Posted April 21, 2011 Share Posted April 21, 2011 Usually, I can Google what I need for JavaScript and simply alter the code to do what I want. However, I could not find anything like this, probably because I'm Googling the wrong key words. I have a database filled with the names of Songs. I can spit the list of songs out into a drop down list. However, now that I have 5,000 songs in there, this is becoming more of a pain in searching for the songs. Even a multi-line list box isn't so great anymore. What I'd like to create is a INPUT search box, and as you type into the search box, it will automatically select the right song in the list box. The rest of the site is in php, but I assume I need JS to do this. Can someone point me in the right direction here? Link to comment https://forums.phpfreaks.com/topic/234307-javascript/ Share on other sites More sharing options...
TapeGun007 Posted April 21, 2011 Author Share Posted April 21, 2011 I got to thinking maybe I should add a little more detail: So if I have an input box, and as I type into the box "Love" the drop down list would automatically go to the first song with "Love" in it. Link to comment https://forums.phpfreaks.com/topic/234307-javascript/#findComment-1204313 Share on other sites More sharing options...
TapeGun007 Posted April 21, 2011 Author Share Posted April 21, 2011 After scouring the web, I came up with a perfect piece of really simple code. Here is the JavaScript: function autoComplete(field, select, property, forcematch){ var found = false; for(var i = 0; i < select.options.length; i++){ if(select.options[i][property].toUpperCase().indexOf(field.value.toUpperCase()) == 0){ found=true; break; } } if(found){ select.selectedIndex = i; }else{ select.selectedIndex = -1; } if(field.createTextRange){ if(forcematch && !found){ field.value=field.value.substring(0,field.value.length-1); return; } 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(); } } } } This example code works great! <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript" SRC="components/autocomplete.js"></SCRIPT> </HEAD> . . . <FORM> <B>Auto-Complete</B><BR> Start typing a name in the input box that matches a name in the drop-down...<BR> <INPUT TYPE="text" NAME="input1" VALUE="" ONKEYUP="autoComplete(this,this.form.options,'value',true)"> <SELECT NAME="options" onChange="this.form.input1.value=this.options[this.selectedIndex].value"> <OPTION VALUE="adam">adam <OPTION VALUE="george">george <OPTION VALUE="matt">matt <OPTION VALUE="bill">bill <OPTION VALUE="greg">greg <OPTION VALUE="bob">bob <OPTION VALUE="david">david <OPTION VALUE="ryan">ryan </SELECT> </FORM> However, when I try to modify the code and insert some PHP, this partially works. If I select something from the drop down list, it will autopopulate the INPUT box, but the INPUT box does not auto select the drop down list like the HTML example above does. I am making a call to include the Javascript in the <head></head> tags btw. <tr><td align="right">Which song does this belong to? </td> <td> <b>Search:</b><br> <INPUT TYPE="text" NAME="input1" VALUE="" ONKEYUP="autoComplete(this,this.form.options,'value',true)"> <SELECT NAME="options" onChange="this.form.input1.value=this.options[this.selectedIndex].value"> <?php $result = mysql_query("SELECT * FROM SongEntries ORDER BY SongTitle ASC"); while($row = @mysql_fetch_array($result)){ If (strlen($row['AlbumName'])<1){ echo "<OPTION VALUE='".$row['SongTitle']." ~ ".$row['SingerGroup']."'>".$row['SongTitle']." ~ ".$row['SingerGroup']; }else{ echo "<OPTION VALUE='".$row['SongTitle']." ~ ".$row['SingerGroup']." ~ ".$row['AlbumName']."'>".$row['SongTitle']." ~ ".$row['SingerGroup']." ~ ".$row['AlbumName']; } } ?> </select> </td> </tr> Anyone have any clue as to why this is? Link to comment https://forums.phpfreaks.com/topic/234307-javascript/#findComment-1204340 Share on other sites More sharing options...
TapeGun007 Posted April 21, 2011 Author Share Posted April 21, 2011 Ah... LOL. I answered my own questions. The call to the JavaScript wasn't working correctly for some reason in the include file. When I manually called the JavaScript from the page, and not in the include file, it worked just fine. Link to comment https://forums.phpfreaks.com/topic/234307-javascript/#findComment-1204342 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.