Question

假设我有简单的下拉列表 - (http://jsfiddle.net/J52s9/).此处为此下拉列表我如何才能拥有搜索选项。

例如，如果在文本框中用户写入周，则只应显示将周作为字符串一部分的下拉列表。

我正在使用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>

$（document）.ready（function（）{ $（ '选择'）选择（）; }）;

请指导。提前谢谢！

Answer 1

chosen是一个很好的jQuery插件

$('select').chosen();

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

Answer 2

您可以根据您的要求使用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 个答案: