JQuery AutoComplete Combobox

Question

我一直试图在短时间内完成自动完成工作,并且只是在试图使其工作时撞到墙上.我已经尝试了很多例子,没有一个对我有用的意义.

我创建了一个例子,希望能解释我想要做的事情.这是一个MVC 3应用程序

我正在使用jquery站点http://jqueryui.com/autocomplete/#combobox上的自动完成代码,我将其链接到我的_Layout.cshtml文件的标题以及所有其他必需的js和css文件.

我在Home/Index.cshtml中查看的Div和用于执行操作的按钮.

<div id="SearchDiv"></div>
<button id="SearchBtn" type="button" style="float: right">Search</button>

该视图包含js文件,我在其中创建SELECT元素并定义按钮单击.

<script src="@Url.Content("~/Scripts/combobox.js")" type="text/javascript"></script>

JS文件内容如下.

        var theader = '<table class="tbl">\n';
        var tbody = '';

for (var i = 0; i < 10; i++) {
    if (i % 2 == 0)
        tbody += '<tr>';
    tbody += '<td><select class="SelectionControls"/><option value="0"></option>';
    tbody += '<option value="1">This is a test</option>';
    tbody += '<option value="2">This is a test 1</option>';
    tbody += '<option value="3">This is a test 2</option>';
    tbody += '<option value="4">This is a test 3</option>';
    tbody += '<option value="5">This is a test 4</option>';
    tbody += '<select></td>';

    if (i % 2 != 0)
        tbody += '</tr>\n';
}
var tfooter = '</table>';
document.getElementById('SearchDiv').innerHTML = theader + tbody + tfooter;

$(".SelectionControls").combobox();

$("#SearchBtn").click(function () {
    var readtheselectedvalue= $(".SelectionControls")[0].val();
});

当我运行代码时,除了将组合框放在表格中的屏幕上之外没有任何反应,但它们都是空的.我需要使用上面的纹理值填充组合框,以便在选择项目时组合框文本框中显示所选文本,但是当我读取val()时,我需要它返回与该选择相关联的值0 - 5.

我需要能够在javascript中读取值0-5,因为我需要进一步处理,一旦按下"搜索"按钮,我需要处理该值.

如果有人能告诉我如何实现这一目标,我将非常感激,因为我多年来一直在努力奋斗.

Answer 1

在我自己努力完成这么多自动填充脚本之后,这只是一个暗示.

Chosen是有史以来最好的自动完成插件.