我使用Twitter typeahead(使用Bloodhound引擎)实现了自动完成function,并且运行正常。 我的下一步是使用生成/获得的数据(在我的情况下’name’和’id’)进行搜索操作。 这就是我遇到困难的地方。关于如何将数据传递给控制器以进行搜索操作,我完全空白。 我没有使用表单,但我想使用搜索按钮单击或js函数OnclickSearchButton或可能有更好的方法?!
我的JS代码:
$(document).ready(function () { var viewModel = {}; //will store id and string to pass for the search operation //var urlRoot = '/Test/GetName'; //we get url to the controller and min. char to invoke search from the html helper JavaScriptParameter var urlRoot = urlToController; //var lengthMin = 1; var lengthMin = minCharNeededForSearch; var information = { url: urlRoot, prepare: function (query, settings) { settings.type = "POST", settings.url += '?prefix=' + query; return settings; } }; var names = new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.obj.whitespace('navn'), queryTokenizer: Bloodhound.tokenizers.whitespace, remote: information, }); //options $('#search').typeahead({ hint: false, minLength: lengthMin, highlight: true, }, //dataset { name: 'navn', //The name of the dataset display: 'name', // For a given suggestion, determines the string representation of it. This will be used when setting the value of the input control after a suggestion is selected. source: names, //the backing data source for suggestions limit: 10 //this is bug fix-around in Bloodhound engine so that it displays more than 1 or 2 record in the autocomplete }).on("typeahead:selected", function (e, datum) { //console.log(datum); //not sure if I can write a function here $('.search').on("click", function () { $.ajax({ type: 'POST', url: '/Test/GetResponse', data: datum, contentType: "application/json; charset=utf-8", success: function (data) { console.log("click function working"); } }); }); }); });
我对应的HTML:
我的asp.net控制器的方法:
[HttpPost] public JsonResult GetName(string prefix) { var names = (from n in context.checkboxstates where n.Navn.StartsWith(prefix) select new { name = n.Navn, Id = n.Id }).ToList(); return Json(names); }
我们将非常感谢您的帮助。
我发布了自动完成列表中“选定”字符串的解决方案:
只要用户通过按Enter键或单击按钮从自动完成列表中选择一个选项,就会触发此function。 我正在使用ajax调用而不是提交表单。
$('#searchBox').bind('typeahead:select', function (event, datum) { $('#searchBox').keypress(function (event, datum) { if (event.which == 13) { $('.searchButton').trigger('click'); } }); $('.searchButton').click(function () { //code to implement search function }); });
以上就是jQuery教程分享twitter打字后自动完成asp.net mvc jquery ajax的搜索操作相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。
本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址:https://www.ctvol.com/jquerytutorial/557751.html