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

Question

I implemented autocomplete using type Twitter (with the Bloodhound engine) and it works great. The next step is to use the generated / received data (in my case, "name" and "identifier") to perform a search operation. Here I am having difficulty. I absolutely do not understand how to transfer data to the controller for the search operation. I don’t use the form, but I want to use either the search button button or the js OnclickSearchButton function, or maybe the best way ?!

My JS code is:

$(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");
                }
            });
        });
    });
});

My corresponding 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>

My asp.net controller method:

[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);
}

Your help would be greatly appreciated.

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      

    });


});