具有搜索功能的下拉列表答案

【问题标题】：drop-down list with search capability具有搜索功能的下拉列表
【发布时间】：2014-04-30 08:43:42
【问题描述】：

假设我有一个简单的下拉列表 - (http://jsfiddle.net/J52s9/). 这里是这个下拉列表我怎样才能有一个搜索选项。

例如，如果用户在文本框中写入 Weeks，则应仅出现将星期作为字符串一部分的下拉列表。

我正在使用 php。

我累了-

    <html>
    <head>
    </head>
    <body>
    <select name="dateRange" id="mySelect" size="1">
           <option value > Select Duration </option>
           <option value="A">Last 24 Hours</option>
           <option value="B">Last 2 Days</option>
           <option value="C">Last Week</option>
           <option value="D">Last 2 Weeks</option>
           <option value="E">Last Month</option>
           <option value="F">Last 3 Months</option>
           <option value="G">Last 6 Months</option>
           <option value="H">Last Year</option>
    </select> 
    </form>
    </body>
    </html>

$(文档).ready(函数() { $('select').chosen(); });

请指导。提前致谢！

【问题讨论】：

标签： php html drop-down-menu

【解决方案1】：

您可以根据您的要求使用 html5 datalist 元素。检查这是否是您需要的：

将以下内容复制到 html 文件中。

<!DOCTYPE html> <html> <head> </head> <body> <label>Search</label> <input list='mySelect'> <datalist name="dateRange" id="mySelect" size="1"> <option value > Select Duration </option> <option value="A">Last 24 Hours</option> <option value="B">Last 2 Days</option> <option value="C">Last Week</option> <option value="D">Last 2 Weeks</option> <option value="E">Last Month</option> <option value="F">Last 3 Months</option> <option value="G">Last 6 Months</option> <option value="H">Last Year</option> </datalist> </form> </body> </html>

【讨论】：

但我的下拉列表不是这样显示的。

【解决方案2】：

chosen 是一个不错的 jQuery 插件

$('select').chosen();

更新的 jsfiddle：http://jsfiddle.net/J52s9/2/

【讨论】：

能否请您检查更新问题。我在你回答后发布了我累的东西，但这对我不起作用
还包括 jquery:code.jquery.com/jquery-1.11.0.min.js 和 selected.css 文件
"code.jquery.com/jquery-1.11.0.min.js" 和 harvesthq.github.com/chosen/chosen/chosen.css">
我已经包含了两者，但它仍然不适合我
好的，先包含 jquery，然后是 selected.js - 还要在 code.jquery.com/jquery-1.11.0.min.js 前面添加 http://