поиск работа после твиттер typeahead autocomplete asp.net mvc jquery ajax

Question

Я реализовал автозаполнение с использованием типа Twitter (с движком Bloodhound), и он отлично работает. Следующим шагом будет использование сгенерированных/полученных данных (в моем случае «имя» и «идентификатор») для выполнения операции поиска. Здесь я испытываю трудности. Я совершенно не понимаю, как передать данные контроллеру для операции поиска. Я не использую форму, но я хочу использовать либо кнопку кнопки поиска, либо функцию 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

Я отправляю мое решение для «выбранной» строки из автозаполнения списка:

Эта функция вызывается всякий раз, когда пользователь выбирает опцию из автозаполнения списка либо нажатием ввода или нажав на кнопку кнопка. Я использую вызов 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  

    }); 


});