twitter typeahead 自动完成后的搜索操作 asp.net mvc jquery ajax

Question

我已经使用 Twitter typeahead（使用 Bloodhound 引擎）实现了自动完成功能，并且运行良好。我的下一步是使用 generated/obtained 数据（在我的例子中是 'name' 和 'id'）进行搜索操作。这就是我 difficulty.I 对于如何将数据传递给控制器以进行搜索操作一无所知的地方。我没有使用表单，但我想使用搜索按钮点击或 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：

<div class="input-group"><span class="searchInfoImage"></span><input class="form-control fri ui-autocomplete-input" id="search" placeholder="search here..." style="min-width:175px" type="text"></input><button caption="search" class="btn btn-basic-blue search" click="OnclickSearchButton()" type="button">Search</button></div>

我的 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);
}

非常感谢您的帮助。

Answer 1

我正在为自动完成列表中的 'selected' 字符串发布我的解决方案：

只要用户通过按回车键或单击按钮从自动完成列表中选择一个选项，就会触发此函数。我正在使用 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      

    });


});

twitter typeahead 自动完成后的搜索操作 asp.net mvc jquery ajax

search operation after twitter typeahead autocomplete asp.net mvc jquery ajax

jquery

ajax

asp.net-mvc

typeahead

bloodhound