4

我一直试图在短时间内了解自动完成功能，我只是把头撞在墙上试图让它工作。我已经尝试了很多例子，但没有一个对我来说足够有意义。

我创建了一个示例，希望能解释我正在尝试做的事情。这是一个 MVC 3 应用程序

我正在使用来自http://jqueryui.com/autocomplete/#combobox的 jquery 站点的自动完成代码，并且我将它与所有其他必需的 js 和 css 文件一起链接到我的 _Layout.cshtml 文件的标题中。

我认为 Home/Index.cshtml 上的 Div 和用于执行操作的按钮。

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

如果有人能告诉我我是如何做到这一点的，我将非常感激，因为我多年来一直在努力解决这个问题。

4

2 回答 2

8

在自己与这么多自动完成脚本苦苦挣扎之后，只是一个提示。

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

于 2013-02-21T20:45:46.120 回答
1

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

  1. 只需在视图的 HTML 中创建选择列表，而不是使用 JavaScript 构建它。我真的不明白为什么你需要用 JavaScript 来做这件事。然后，在 document.ready() 中调用 .combobox() 以便仅在文档完全加载后调用它。

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

  2. 如果您必须构建它，请尝试将调用 .combobox 放在 setTimeout 中。这可能会在调用 .combox 函数之前给页面足够的时间进行更新，当 .combobox 正在寻找它时它会在那里。

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

此外，在与自动完成组合框作斗争之后，我终于编写了自己的插件来满足我的一切需求。如果您想尝试一下，请访问https://github.com/tmooney3979/jquery.ui.combify 。

于 2013-02-21T20:50:20.617 回答