使用公共搜索值搜索输入

我想要创建一个搜索输入，当我关注它时，将显示一个选项菜单，当我选择时，它可以连接到搜索文本。例子：使用公共搜索值搜索输入

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

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

当我点击我的VALUE1搜索文本会像 “VALUE1：TEXT_TO_FIND”。

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

感谢，

来源

2014-02-10 leandronn

你尝试过什么吗？ – Tibos

试过但不知道如何做列表选项出现。 – leandronn

由于您标记了[tag：jquery]，因此请查找jQuery UI的自动完成。你只需要提供一个值列表来显示。 – Kroltan

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

来源

2014-02-10 18:34:10 justspamjustin

我需要的是立即给出一个选项列表，当我专注于搜索输入时进行选择。这只是自动完成，一个不错的，但不是我在找什么。对不起，如果误解了。 – leandronn

我从推特更新到选定的jquery插件。 – justspamjustin

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

来源

2014-02-10 18:26:34 ElDoRado1239

使用公共搜索值搜索输入

回答

相关问题