Question

我想做点事情：

<select>
    <option value=""> Please select </option>
    <option value="search"> < /input search > </option>
    <option value="name1"> name1 </option>
    <option value="aname2"> aname2 </option>
    <option value="bname3"> bname3 </option>
    <option value="bname4"> bname4 </option>
    <option value="cname5"> cname5 </option>
    <option value="cname6"> cname6 </option>
</select>

http://jsfiddle.net/vvJ5d/1/

如果我设置/鼠标悬停/单击选项SEARCH，那么我想在其他选项值中搜索。我选择300选项。例如，如果我写 b ，那么这只会在列表中显示 bname3 和 bname4 。

怎么能成功？可能是这样的。我必须使用jQuery，而不是Mototools等

Answer 1

您不希望使用基本选择执行此操作，因为它是不可能的。但jQuery UI具有自动完成功能：http://jqueryui.com/demos/autocomplete/，这对您来说非常适合。

以下是一个更具体的例子：http://jsfiddle.net/jGme9/

Answer 2

使用选择，我认为这是最好的插件：

http://harvesthq.github.com/chosen/

Answer 3

您可以使用jQuery

中的自动填充功能

var data = [ {text:'Link A', url:'/page1'}, {text:'Link B', url: '/page2'} ];
$("#selectid").autocomplete(data, {
    formatItem: function(item) {
        return item.text;
    }
}).result(function(event, item) {
      location.href = item.url;
});

Answer 4

只要您允许查询单独的输入字段并且不需要将搜索卸载到服务器，就可以这样写：

<script>
function bind_select_search(srch, select, arr_name) {    
  window[arr_name] = []
  $(select + " option").each(function(){                    
        window[arr_name][this.value] = this.text
  })
  $(srch).keyup(function(e) {
      text = $(srch).val()
      if (text != '' || e.keyCode == 8) {
            arr = window[arr_name]
            $(select + " option").remove()                          
          tmp  = ''
          for (key in arr) {
              option_text = arr[key].toLowerCase()
              if (option_text.search(text.toLowerCase()) > -1 ) {                     
                  tmp += '<option value="'+key+'">'+ arr[key] +'</option>'
              }
          }
          $(select).append(tmp)
       }
   })
  $(srch).keydown(function(e) {
          if (e.keyCode == 8) // Backspace
              $(srch).trigger('keyup')
  })

}





</script>

形式：

<input id="srch" type="text" name="search">    
<select id="slct">
    <option value="1">London</option>
    <option value="2">New York</option>
    <option value="3">Paris</option>
    <option value="4">Oslo</option>
    <option value="5">Berlin</option>
</select>

http://jsfiddle.net/X72G7/3/

在选择列表中搜索？

4 个答案: