Ajax AutoComplete Поиск не показывает результатов

Question

Я пытаюсь реализовать свою первую функцию быстрого поиска, которая показывает возможные результаты в раскрывающемся списке по мере ввода. Я думаю, что я действительно близок. Но по некоторым причинам быстрые результаты просто не отображаются в браузере.

Вот код в представлении:

@using (Ajax.BeginForm("Search", "Home", new AjaxOptions 
{ 
    HttpMethod = "GET", 
    InsertionMode = InsertionMode.ReplaceWith, 
    UpdateTargetId = "searchResults" 
})) 
{ 
    <input type="text" name="q" data-autocomplete="@Url.Action("QuickSearch", "Home")" /> 
    <input type="submit" value="Search" /> 
} 

<table id="searchResults"></table> 

И тогда HTML, который отправляется в браузер:

<form action="/Home/Search" data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace-with" data-ajax-update="#searchResults" id="form0" method="post"> 
    <input type="text" name="q" data-autocomplete="/Home/QuickSearch" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"> 
    <input type="submit" value="Search"> 
</form> 

<table id="searchResults"></table> 

Я могу поставить точку останова по методу в контроллере, который запрашивает DB и использование Watch, я вижу, что он возвращает точные результаты с каждым нажатием клавиши:

public ActionResult QuickSearch(string term) 
    { 
     var restaurants = _db.Restaurants 
          .Where(r => r.Name.Contains(term)) 
          .Take(10) 
          .Select(r => new { label = r.Name }); 
     return Json(restaurants, JsonRequestBehavior.AllowGet); 
    } 

И, наконец, вот JavaScript, который должен связать все это вместе:

/// <reference path="jquery-1.4.4-vsdoc.js" /> 
/// <reference path="jquery-ui.js" /> 
/// <reference path="jQuery.tmpl.js" /> 

$(document).ready(function() { 

$(":input[data-autocomplete]").each(function() { 
    $(this).autocomplete({ source: $(this).attr("data-autocomplete") }); 
}); 
$(":input[data-datepicker]").datepicker(); 

$("#searchForm").submit(function() { 
    $.getJSON($(this).attr("action"), // the url to get JSON from 
       $(this).serialize(),  // make q=yellow, for example 
       function (data) {  // what to do with the response 
        var result = $("#searchTemplate").tmpl(data); 
        $("#searchResults").empty() 
          .append(result); 
       } 
     ); 
     return false; 
    }); 
}) 

Я в том числе скрипты:

<script src="/Scripts/jquery-1.10.2.js"></script> 
<script src="/Scripts/respond.js"></script> 
<script src="/Scripts/jquery-ui.js"></script> 
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script> 

Кроме того ... это может быть частью одного и того же вопроса ... Не только быстрые результаты не отображаются в раскрывающемся списке под экраном, но когда я нажимаю «Поиск», результаты отображаются на пустом экране, а не в исходном представлении, как ожидалось.

Answer 1

Проблема оказалась неудачной совпадением между файлами jquery. Я загрузил последние версии jquery, jquery-ui и jquery.unobtrusive, а затем он сработал.

Answer 2

В вашем примере вы возвращаете object с property из Контроллера и автозаполнения jquery не понимают его.

Изменить это:

.Select(r => new { label = r.Name }); 

Для этого:

.Select(r => r.Name); 

И все будет работать

Answer 3

Если вы хотите, чтобы принять это дальше, то есть плагин называется Выбор2, которые могут быть полезными ,

У меня есть вопрос ответил, что покрыли реализацию (как JS и контроллера) этого с базой данных здесь:

Fill Select2 dropdown box from database in MVC 4

Мое решение, которое охватывает много той же земле, что ты работая в вашей реализации. Надеюсь, поможет!