[SOLVED] PHP/Javascript autocomplete menu

[simon551]

Hi I'm trying to get some cool auto-complete features going for my website. I have a drop down menu that works fine pulling from my database, but would like to spruce it up. The drop-down contains a concatenated record separate by a "|". What I would really like is for the menu to filter based on the first letter of the first word AND/OR the first word *after* the "|". I've looked at some javascript type ahead functions and they don't seem to accomplish much beyond the basic funcionality of a drop-down built by Dreamweaver, as far as I can tell.

To be more clear, lets say I have a list from the query that has clients (Emily, Bob, James) and activities (email, filing, jousting) and for each client, each activity is listed, for a total of 9 records. If the user types "J" I would like the list to filter as such:

James|jousting

Bob|jousting

Emily|jousting

James|email

James|filing

Am I crazy?

I'm posting my code as is if it helps.

This is my code as is:

<select name="id_timesheet_code">
          <option value="null">--Please Select--</option>
          <?php
do {  
?>
          <option value="<?php echo $row_rsActivityMenu['id']?>"><?php echo $row_rsActivityMenu['code']?></option>
  <?php
} while ($row_rsActivityMenu = mysql_fetch_assoc($rsActivityMenu));
  $rows = mysql_num_rows($rsActivityMenu);
  if($rows > 0) {
      mysql_data_seek($rsActivityMenu, 0);
  $row_rsActivityMenu = mysql_fetch_assoc($rsActivityMenu);
  }
?>
        </select>

[fenway]

Auto-complete for a SELECT?

[simon551]

no? maybe I'm not approaching this the right way. I'm really looking for an "intelli-select"

[simon551]

can anyone help with this question? I'm trying to find some javascript to kind of jump over the list separator so that typing "a" will give me "a|b" and "b|a". does that make any sense?

[nogray]

Here is a sample fancy select menu, let me know if you have any questions.

 

Basiclly, the list is an array, when the user type something a function will go through the array and match the first characters with the user input. If it match, it'll add it to the drop down div.

 

Good luck

<script language="javascript">
var list = new Array("James|jousting","Bob|jousting","Emily|jousting","James|email","James|filing","someone|else","kaaa?|where","why|any");

function update_list(){
	var txt = "";
	var str = document.getElementById('sel_search').value.toLowerCase();
	for (i=0; i<list.length; i++){
		list_arr = list[i].split("|");
		if ((list_arr[0].substr(0, str.length).toLowerCase() == str) || (list_arr[1].substr(0, str.length).toLowerCase() == str)){
			txt += "<a href=\"#\" onclick=\"document.getElementById('sel_search').value=this.innerHTML;\">"+list[i]+"</a><br />";
		}
	}

	if (txt == "") txt = "No options were found";

	document.getElementById('sel_div').innerHTML = txt;
}

</script>

<input type="text" style="width:200px;" id="sel_search" onkeyup="update_list()" onfocus="update_list(); document.getElementById('sel_div').style.display='';" onblur="setTimeout('document.getElementById(\'sel_div\').style.display=\'none\'',100);" /><br />
<div style="width:200px; height:300px; overflow:scroll; display:none;" id="sel_div"></div>

[simon551]

That's really cool and does exactly what I am trying to accomplish. Now I just need to figure out how to populate the array from my database. Which I guess means I need to learn ajax. arghh.

 

Thank you very much for your help. This is definetely making me believe I can do this.