Javascript 使用公共搜索值搜索输入

我想创建一个搜索输入，当我关注它时，会显示一个选项菜单，当我选择时，它可以连接到搜索文本。 例如：

当我点击VALUE1时，我的搜索文本将类似于“VALUE1:text\u TO\u FIND”

这样，我可以很容易地从客户端过滤返回数据

谢谢

LN

...
var words=[“基地”、“木桶”、“芭比”、“战斗”、“钟声”、“板凳”、“突破口”]；
函数init（）{
document.getElementById（'field'）。onkeyup=hint；
document.getElementById（'hint'）.onchange=select；
}
函数提示（）{
var hintElement=document.getElementById（'hint'）；
var fieldElement=document.getElementById（'field'）；
var str=fieldElement.value.substring（fieldElement.value.lastIndexOf（“”）+1）；
如果（str=''）
返回；
hintelElement.innerHTML=''；
for（var i，大写）
if（字[i]。子字符串（0，str.length）==str）
hintelElement.innerHTML+=''+单词[i]+''；
hintlement.style.display=（hintlement.innerHTML=“”）？“无”：“”；
}
函数选择（）{
var fieldElement=document.getElementById（'field'）；
fieldElement.value=fieldElement.value.substring（0，fieldElement.value.lastIndexOf（“”）+1）+this.value+“”；
this.innerHTML=''；
this.style.display='none'；
document.getElementById（'field'）.focus（）；
}
init（）；

可能是一个不错的选择。

您尝试过什么吗？尝试过但不知道如何显示列表选项。既然您已标记，请查找jQuery UI的自动完成。你只需要为它提供一个要显示的值列表。我需要的是在我关注搜索输入时立即提供一个要选择的选项列表。这些都是自动完成的。我需要的是，当我专注于搜索输入时，立即给出一个选项列表供选择。这只是自动完成，一个不错的，但不是我要找的。如果误解了，很抱歉。我从twitter typeahead更新到了所选的jquery插件。

  |------------------------------------------------------|
  |  |                                                   |
  |  |                                                   |
  |------------------------------------------------------|

  |                                |
  |  VALUE1                        |
  |--------------------------------|
  |                                |
  |  VALUE2                        |
  |--------------------------------|

<input type="text" id="field" /><br>
<select style="display:none;" id="hint" size="4">
</select>

...

var words = ["base","barrel","barbie","battle","bell","bench","breach"];
function init(){
    document.getElementById('field').onkeyup = hint;
    document.getElementById('hint').onchange = select;
}
function hint(){
    var hintElement = document.getElementById('hint');
    var fieldElement = document.getElementById('field');
    var str = fieldElement.value.substring(fieldElement.value.lastIndexOf(' ')+1);
    if(str == '')
        return;
    hintElement.innerHTML = '';
    for(var i in words)
        if(words[i].substring(0,str.length) == str)
            hintElement.innerHTML += '<option value="'+words[i]+'">'+words[i]+'</option>';
        hintElement.style.display = (hintElement.innerHTML == '') ? 'none' : '';
}
function select(){
    var fieldElement = document.getElementById('field');
    fieldElement.value = fieldElement.value.substring(0,fieldElement.value.lastIndexOf(' ')+1) +  this.value + ' ';
    this.innerHTML = '';
    this.style.display = 'none';
    document.getElementById('field').focus();
}
init();