jQuery自动完成组合框

Question

我一直在尝试在短时间内弄清自动完成，但一直没有头绪，我试过很多例子，但都无法让我理解并使用。我创建了一个示例，希望能解释我要做什么。这是一个MVC 3应用程序。我正在使用来自jquery网站的自动完成代码 http://jqueryui.com/autocomplete/#combobox，我已将其链接到我的_Layout.cshtml文件的头部，以及所有其他必需的js和css文件。这个Div位于我在Home/Index.cshtml视图中的按钮上，用于执行一个操作。

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

视图包括我创建SELECT元素和定义按钮点击的js文件。

<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，因为一旦按下“搜索”按钮，我需要对该值进行进一步处理。

如果有人能告诉我如何完成这个任务，我将非常感激，因为我已经苦苦挣扎了很长时间。

- user2096992

---

只是为了明确，你将在一个模型上使用这个组合框进行搜索吗？自动完成功能是否会搜索由控制器填充的选择对象集合，还是它将是在JS文件中硬编码的静态列表？你应该看一下Select2（http://ivaynberg.github.com/select2/）和Chosen（http://harvesthq.github.com/chosen/），我在ASP MVC应用程序中都使用过，它们非常棒。 - Jack

组合框正在显示一个JSON结果，这就是为什么我在JavaScript中创建了组合框的原因。组合框是我正在编写的外部jqgrid过滤系统的一部分。我需要动态创建组合框，因为可能会有几个，所有用户都可以配置，所以我不能简单地将它们放入HTML中。 - user2096992

Answer 1

如果你使用许多自动完成脚本仍然感到困惑，那么这是一个提示。

Chosen 是最好的自动完成插件。

- Timmetje

---

我已经让这个程序正常工作。您是否知道如何读取用户可以输入到组合框文本框中的自由文本，因为我已经禁用了自动完成js的部分功能以保留它并读取它。 - user2096992

Answer 2

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

1. 在您的视图的HTML中创建选择列表，而不是使用JavaScript构建它。我真的看不出来为什么您需要使用JavaScript。然后，在document.ready()内放置对.combobox()的调用，以便仅在文档完全加载后才调用它。

    $(document).ready(function() {
        (".SelectionControls").combobox();
    });
   

2. 如果您必须使用JS构建它，请尝试将对.combobox的调用放在setTimeout内。这可能会给页面足够的时间来更新，然后在.combobox寻找它时，它将存在于那里。

    setTimeout(function(){$(".SelectionControls").combobox()}, 0);
   

此外，在与自动完成组合框（autocomplete comboboxes）的斗争中，我最终编写了自己的插件，它可以满足我所有的需求。如果你想尝试一下，可以访问https://github.com/tmooney3979/jquery.ui.combify。

- portlandrock

---

我已经使这个工作了，不要问我怎么做的，因为我也说不清楚。可能只是我输错了或者其他什么原因。不管怎样，我现在已经禁用了removeIfInvalid方法中删除组合框输入框中无效文本的部分。如何读取这个文本，因为它只是自由文本，而不是组合框内的选择？我似乎无法访问它。 - user2096992