Question

我正在尝试构建一个可以向多个收件人发送邮件的小型Web应用程序。目前我有一个消息框，一个发送按钮和一个由我们客户的数据库查询填充的选择框。您可以想象在选择选项框中有一长串客户端。我希望放入另一个文本框，在该文本区域中搜索客户端名称，并在键入时突出显示。

<form id="form1" name="form1" method="post" action="">
  <input type="text" name="search" id="search" />
    <select name="select" size="20" id="select">
      <option 1>james</option>
      <option 2>johns</option>
      <option n>janes</option>
    </select>

任何人都可以提供像这样的jquery代码的例子，我做了很多狩猎，但没有发现任何东西，我对jquery不是很好：（

Answer 1

尝试使用chosen plugin

<强> HTML

<select name="select" multiple size="20" id="select" class="chosen-select">
   <option value="1">james</option>
   <option value="2">johns</option>
   <option value="n">janes</option>
</select>

<强> SCRIPT

$(function(){
    $(".chosen-select").chosen({disable_search_threshold: 10});
});

Live demo

Answer 2

嗯，你需要一个autocomplete字段，Twitter bootstrap TypeAhead.js，它强大，易于使用，外观也很好。

https://github.com/biggora/bootstrap-ajax-typeahead

JQUERY CODE：

    $('.typeahead').typeahead({
        source: data
    });

现场演示：

http://jsfiddle.net/dreamweiver/p3wXs/69/

快乐编码：）

Answer 3

听起来你想要使用自动完成功能。您可以使用jQuery UI。否则，解释您的要求听起来好像您希望某人键入文本区域并自动填写选择。您可以从以下内容开始（请参阅此处了解 a demo ）：

$('textarea').keyup(function()
{
    var text = $(this).val();
    var lastWord = text.split(' ').pop().trim();    
    if( lastWord )
    {
        $("select option").filter(function() {        
            return $(this).text() == lastWord; 
        }).prop('selected', true);
    }
});

jquery搜索选择选项区域

3 个答案: