Jump to content

JavaScript


TapeGun007

Recommended Posts

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

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.