3

我正在开发一个 MVC 应用程序 .net。

我有一个名为“产品”的文本框。我必须使用 jquery 和 ajax 使用来自服务器的列表自动填充文本框

这是代码：

@Html.TextBoxFor(model=>model.Products,new {@id = "Products"})

在此文本框中，我需要通过 ajax 调用控制器的操作并获取数据。

$('#Products).autocomplete()
{
    alert('kl');
    AutoCompleteDetails()
}

function AutoCompleteDetails()
{
    var url = '@Url.Action("Search", "Student")';
    href = url;

    $.ajax({
            url: href,
            dataType: "json",
            data: AutoDetails,
            type: "POST",
            context: this,
            success: function (data) {

}

在页面加载时，控件正在点击 Student 控制器的 Search 动作，我在这里有两个疑问：

  1. 在页面加载时，点击“搜索”操作后，我将模型值绑定回页面，但这些值不被视为下拉菜单，如名为“产品”的文本框中的建议

  2. 页面加载后，当我输入“KL”并标记出“学生”控制器的“搜索”动作时，没有被调用。

有什么建议么？

4

3 回答 3

1

我们在我们的项目中实现了同样的事情。

让我给你看一个例子

  @Html.TextBoxFor(m => m.Filter.MyData)
                                <span>
                                    <img onclick=" openAutoCompleteBox() " alt="click" src="../Content/images/dropdown_arrow.gif"
                                        height="19px" style="cursor: pointer;"></span>

我正在做的是我试图让它作为下拉菜单起作用，所以在它的旁边添加了一个图像，点击它，它会调用 openAutoCompleteBox。

  1. 在页面加载时，点击“搜索”操作后，我将模型值绑定回页面，但这些值不被视为下拉菜单，如名为“产品”的文本框中的建议

为此，我们所做的是，我们仅在页面加载时加载了值，自动完成插件将仅在客户端搜索值

  1. 页面加载后，当我输入“KL”并标记出“学生”控制器的“搜索”动作时，没有被调用。

你不需要调用控制器，因为自动完成插件会处理这个

我不确定我的实现是否符合您的要求，但是我在一个角色之后一次又一次地调用控制器会给您的生产服务器带来额外的负载。如果您有静态值，那么我建议它在页面加载时加载它。如果它是动态的，那么你的方法很好。

更新了 OpenAutoComplete 的代码

var sState = $(".jsonSuggestResults").is(":visible");

    function openAutoCompleteBox() {

        if (sState) {
            $(".jsonSuggestResults").hide();
            sState = false;
        } else {
            var valCrime = $("#Filter_dropdown").val();
                      sState = true;
        }
    }
于 2013-08-09T05:18:24.073 回答
1

尝试以下示例，我认为这会有所帮助：

$("#Products").autocomplete({
    source:
    function (request, response) {
        $.ajax({
            url: href, // Search Url Goes Here
            dataType: "json",
            cache: false,
            data: {
                term: request.term
            },
            success: function (data) {
                response(data);
            }
        });
    },
    minLength: 1,
    select: function (event, ui) {
        if (ui.item) {
            $("#Products").val(ui.item.value);
        }
    }
});
于 2014-10-22T09:05:51.917 回答
0

我建议你使用 jQueryUI 自动完成插件，我已经使用了很长时间，它简单而有趣。这是 url jQueryUI 自动完成

还要检查其他功能。

于 2014-08-11T10:16:10.607 回答