如何实现下列功能：在一个TEXT中输入“1“时，下拉框显示头一个字符是1的项目，接着在TEXT中输入2时，下拉框显示头2个字符是12的项目？以此类推

Question

<script>
function test(){
var oOption = new Option();
oOption.text=document.form1.mxh.value
document.form1.mxh2.options[0]=oOption
}
</script>
<form name=form1>
<input name=mxh onkeydown="test()" type=text>
<select name=mxh2>
<option >
</select>
</form>

Answer 1

<script>
function autoComplete (field, select, property, forcematch) {
var found = false;
for (var i = 0; i < select.options.length; i++) {
if (select.options[i][property].indexOf(field.value) == 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();
}
}
}
}</script>
<FORM><B>自动完成</B><BR>请输入123……<BR>
<INPUT onkeyup="autoComplete(this,this.form.options,'value',true)" name=input1>
<SELECT name=options>
<OPTION value=1www selected>1www
<OPTION value=12eee selected>12eee
<OPTION value=123rr selected>123rr
<OPTION value=孟宪会之精彩世界>孟宪会之精彩世界</OPTION>
</SELECT>
</FORM>

Answer 2

孟子E章:下拉框显示的项目是从sql中读出，而且不止一个。因为项目太多，所以想用此办法让项目显示少一些，以便从下拉框中选择出来。

Answer 3

你的意思不会是说，当文本框输入一个字后，select就从库里取一个匹配的值出来吧？？那样是没有实际意义的。你可以把值从SQL里取出，生成JAVASCRIPT代码，这样操作方便些吧！

Answer 4

孟子E章:
1。比如在text输入a,下拉框显示数据库中第一个字母是a的所有项目；接着输入b时，下拉框显示数据库中头2个字母是ab的所有项目；以此类推。
2。在下拉框中每选择一个项目，在另一个页面显示这个项目。

Answer 5

孟子E章:
我的qq是53380796，我们可以细谈！

Answer 6

你可以将用户可能用到的所有数据都放到xml中，当在text中输入时，根据text中的字符对xml中的节点的相应属性或值进行过滤再动态加到select中即可。

Answer 7

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * FileName: DynaSelection.js
 * Author: Xu Jie
 * Create: 2001-07-19
 * Version: 1.0
 * Description:
 * ----------------------------------------------------------------------------
 * Copyright (c) 2001 by XUJIE.
 *+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * Fields:
 * ----------------------------------------------------------------------------
 * value
 *  - The value of selection
 * ----------------------------------------------------------------------------
 * Methods:
 * ----------------------------------------------------------------------------
 * init()
 *  - Set The options list into the selection and draw them on the html page.
 * addItem()
 *  - Add one item into list before initialize, the method must be called
 *    bofore method init is called.
 * getSelection()
 *  - Once user type a charactor in the text box, the method will be called.
 *    The method is to select correct values from selection option list.
 *+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * Example:
 * ----------------------------------------------------------------------------
 * <script language="JavaScript" src="DynaSelection.js"></script>
 * <script language="JavaScript">
 * var ds = new DynaSelection();
 *
 *  ds.addItem("Option1");
 *  ds.addItem("Option2");
 *  ds.addItem("Option3");
 *
 *  ds.init();
 * </script>
 *+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 */var arrList = new Array();
var idxList = 0;
var value;/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 *
 */
function DynaSelection() { this.value = value; this.init = Selection_Initialize;
this.addItem = Selection_Add_Item;
this.getSelection = Selection_Get_Result;
}/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 *
 *+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 */
function Selection_Initialize() {
document.write("<input type=\"text\" name=\"DynaSelection_Text\" value=\"\" onKeyUp=\"Selection_Get_Result()\"><br>");
document.write("<select name=\"DynaSelection_Select\" multiple size=10 style=\"width:150\">");
for (var i = 0; i < arrList.length; i++) {
document.write("<option>"+arrList[i]+"</option>");
}
document.write("</select>");
}/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 *
 *+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 */
function Selection_Add_Item(strItem) {
arrList[idxList++] = strItem;
}/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 *
 *+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 */
function Selection_Get_Result() {
var subArr = new Array();
var index = 0; if (window.event.srcElement.value != "") { var subStr = window.event.srcElement.value; for (var i = 0; i < arrList.length; i ++ ) {
if (arrList[i].substring(0,subStr.length).toUpperCase() == subStr.toUpperCase()) {
subArr[index++] = arrList[i];
}
}
DynaSelection_Select.options.length = index;
}
else {
DynaSelection_Select.options.length = arrList.length;
subArr = arrList;
}
for (var i = 0; i < subArr.length; i ++) {
DynaSelection_Select.options[i].text = subArr[i];
} value = window.event.srcElement.value;
}