Question

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

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

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

当我点击VALUE1时，我的搜索文字就像“VALUE1：TEXT_TO_FIND”。

这样，我可以轻松地从客户端过滤我的返回数据。

谢谢，

LN

Answer 1

DEMO

<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();

Answer 2

Chosen jQuery Plugin可能是个不错的选择。

使用常用搜索值搜索输入

2 个答案: