Не могу получить Typeahead.js Работа с MVC 5 Over Remote

Question

Я понятия не имею, что я делаю неправильно, но я не могу заставить typeahead работать в моем приложении MVC 5. Я установил все через NuGet, и мое представление включает в себя @Scripts.Render("~/bundles/typeahead"), которое правильно обрабатывается при просмотре источника представления. Поэтому проблема заключается не в том, что зависимости отсутствуют.

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

Вот линия, на мой взгляд, что машинописный придается:

@Html.TextBoxFor(m => m.MainInfo.CompanyName, 
     new { @class = "form-control typeahead", id = "comp-name", autocomplete="off" }) 

Вот часть моего сценария, который настраивает машинописный и ищейка:

$(document).ready(function() { 

    var clients = new Bloodhound({ 
     datumTokenizer: function (datum) { 
      return Bloodhound.tokenizers.whitespace(datum.value); 
     }, 
     queryTokenizer: Bloodhound.tokenizers.whitespace, 
     remote: { 
      url: "/info/client?like=%QUERY", 
      wildcard: '%QUERY', 
      filter: function (clients) { 
       return $.map(clients, function (client) { 
        return { 
         value: client.Name, 
         clientId: client.Identifier 
        }; 
       }); 
      } 
     } 
    }); 

    clients.initialize(); 

    $('#comp-name').typeahead(null, 
    { 
     display: 'value', 
     minLength: 1, 
     source: clients.ttAdapter(), 
     templates: { 
      empty: "Looks like a new client...", 
      suggestion: Handlebars.compile("<p><b>{{value}}</b> - {{clientId}}</p>") 
     } 
    }); 
}); 

Есть ли что-то, что я настроил неправильно в моем javascript? Я использовал несколько учебников, а также их собственную документацию, но я не могу понять, что я делаю неправильно здесь. Похоже, что он неправильно инициализирован, но ошибок не возникает.

ПРИМЕЧАНИЕ: Как и в случае с FYI, я также использую Bootstrap 3 в случае, если что-то изменит.

EDIT: Вот мой @section Scripts:

@Scripts.Render("~/bundles/jqueryval") 
@Scripts.Render("~/bundles/typeahead") 
<script src="@Url.Content("~/Scripts/handlebars.min.js")"></script> 
<script src="@Url.Content("~/Scripts/ProjectSetupFormScripts.js")"></script> <-- this is where typeahead is set up 

Answer 1

Здравствуйте пытаются обернуть сценарий в @section scripts {} это будет поместить сценарий в нижней части непосредственно перед </body> тег и убедитесь, что вы не вызывая функцию перед нагрузка ваших пакетов.

@section scripts { 
<script> 
$(document).ready(function() { 

    var clients = new Bloodhound({ 
     datumTokenizer: function (datum) { 
      return Bloodhound.tokenizers.whitespace(datum.value); 
     }, 
     queryTokenizer: Bloodhound.tokenizers.whitespace, 
     remote: { 
      url: "/info/client?like=%QUERY", 
      wildcard: '%QUERY', 
      filter: function (clients) { 
       return $.map(clients, function (client) { 
        return { 
         value: client.Name, 
         clientId: client.Identifier 
        }; 
       }); 
      } 
     } 
    }); 

    clients.initialize(); 

    $('#comp-name').typeahead(null, 
    { 
     display: 'value', 
     minLength: 1, 
     source: clients.ttAdapter(), 
     templates: { 
      empty: "Looks like a new client...", 
      suggestion: Handlebars.compile("<p><b>{{value}}</b> - {{clientId}}</p>") 
     } 
    }); 
}); 
</script> 
} 

Answer 2

Это сделал трюк для меня:

JS

@section Scripts { 
<script type="text/javascript"> 
    $(function() { 
     SetupTipeahead(); 
    }); 
    function SetupTipeahead() { 
     var engine = new Bloodhound({ 
      remote: { 
       url: '/Employees/AllEmployees', 
       ajax: { 
        type: 'GET' 
       } 
      }, 
      datumTokenizer: function (d) { 
       return Bloodhound.tokenizers.whitespace(d.FullName); 
      }, 
      queryTokenizer: Bloodhound.tokenizers.whitespace 
     }); 

     engine.initialize(); 

     $('#FullName').typeahead(null, { 
      displayKey: 'FullName', 
      source: engine.ttAdapter(), 
      templates: { 
       empty: [ 
            '<div class="empty-message">', 
            'No match', 
            '</div>' 
       ].join('\n'), 
       suggestion: function (data) { 
        return '<p class="">' + data.FullName + '</p><p class="">' + data.ManNumber + '</p>'; 
       } 
      } 
     }); 
    } 
</script> 

EmployeesController имеет следующие JsonResult

 public JsonResult AllEmployees() 
    { 
     return Json(db.Employees.ToList(),JsonRequestBehavior.AllowGet); 
    }