Question

我一直在努力让自己在短时间内完成自动完成工作，并且只是在试图使其工作时撞到墙上。我已经尝试了很多例子，但没有一个足够让我使用。

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

我正在http://jqueryui.com/autocomplete/#combobox使用jquery网站上的自动完成代码，我将其链接到我的_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是有史以来最好的自动完成插件。

Answer 2

我的猜测是，由于您在创建组合框的同一JavaScript函数中创建选择列表，因此选择列表尚未出现在文档中，因此组合框插件无法找到它来构建自动完成名单。你可以尝试一些事情：

只需在视图的HTML中创建选择列表，而不是使用JavaScript构建它。我真的没有理由说你需要用JavaScript来做这件事。然后，将您对.combobox（）的调用放在document.ready（）中，这样只有在文档完全加载后才会调用它。
```
 $(document).ready(function() {
     (".SelectionControls").combobox();
 });
```
如果你必须构建它，JS尝试将你的调用放在setTimeout中.combobox。这可能会让页面在调用.combox函数之前有足够的时间进行更新，当.combobox正在寻找它时它会在那里。
```
 setTimeout(function(){$(".SelectionControls").combobox()}, 0);
```

此外，在努力完成自动完成组合框后，我终于编写了自己的插件来完成我需要的一切。如果您想尝试一下，它就在https://github.com/tmooney3979/jquery.ui.combify。

JQuery AutoComplete Combobox

2 个答案: