asp.net-mvc-3 – 使用mvc3下拉列表进行jquery自动完成

发布时间：2020-12-16 09:51:18 所属栏目：asp.Net 来源：网络整理

导读：我使用ASP.NET MVC3与EF Code First.我之前没有使用过jQuery.我想将自动完成功能添加到绑定到我的模型的下拉列表中.下拉列表存储ID,并显示该值. 那么,如何连接jQuery UI自动完成小部件以在用户键入时显示值但存储ID？我也需要在一个视图中有多个自动完成下

我使用ASP.NET MVC3与EF Code First.我之前没有使用过jQuery.我想将自动完成功能添加到绑定到我的模型的下拉列表中.下拉列表存储ID,并显示该值.

那么,如何连接jQuery UI自动完成小部件以在用户键入时显示值但存储ID？

我也需要在一个视图中有多个自动完成下拉菜单.

我看到了这个插件：http://harvesthq.github.com/chosen/,但我不确定是否要在项目中添加更多“东西”.有没有办法用jQuery UI做到这一点？

解决方法

更新

我刚刚发布了一个示例项目,展示了GitHub上文本框中的jQueryUI自动完成功能
https://github.com/alfalfastrange/jQueryAutocompleteSample

我用常规的MVC TextBox就好了

@Html.TextBoxFor(model => model.MainBranch,new {id = "SearchField",@class = "ui-widget TextField_220" })

这是我的Ajax调用的剪辑

它最初检查其内部缓存的被搜索项目,如果没有找到它会触发Ajax请求到我的控制器操作来检索匹配的记录

$("#SearchField").autocomplete({
    source: function (request,response) {
        var term = request.term;
        if (term in entityCache) {
            response(entityCache[term]);
            return;
        }
        if (entitiesXhr != null) {
            entitiesXhr.abort();
        }
        $.ajax({
            url: actionUrl,data: request,type: "GET",contentType: "application/json; charset=utf-8",timeout: 10000,dataType: "json",success: function (data) {
                entityCache[term] = term;
                response($.map(data,function (item) {
                    return { label: item.SchoolName,value: item.EntityName,id: item.EntityID,code: item.EntityCode };
                }));
            }
        });
    },minLength: 3,select: function (event,result) {
        var id = result.item.id;
        var code = result.item.code;
        getEntityXhr(id,code);
    }
});

这不是所有的代码,但你应该能够在这里看到如何搜索缓存,然后进行Ajax调用,然后对响应做了什么.我有一个选择部分,所以我可以用选定的值做一些事情

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!