自动完成不显示/工作 OdeToFood答案

【问题标题】：Autocomplete not showing/working OdeToFood自动完成不显示/工作 OdeToFood
【发布时间】：2015-02-07 15:22:02
【问题描述】：

我在使用 OdeToFood 复数项目的自动完成时遇到了一些问题。当我在 URL 中使用自动完成时会有结果，但是当我在我的构建主页上的搜索栏中输入时没有任何反应。

Index.cshtml

@model IEnumerable<OdeToFood.Models.RestaurantListViewModel>

@{
    ViewBag.Title = "Home Page";
}


 <form method="get" action="@Url.Action("Index")" data-otf-ajax="true" data-otf-target="#restaurantList">
    <input type="text" name="searchTerm" data-otf-autocomplete="@Url.Action("Autocomplete")" />
    <input type="submit" value="Search By Name" />
</form> 

@Html.Partial("_Restaurants", Model)

HomeController.cs 的片段

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

otf.js

$(function () {

    var AjaxFormSubmit = function () {

        var $form = $(this);
        var options = {
            url: $form.attr("action"),
            type: $form.attr("method"),
            data: $form.serialize()
        };


        $.ajax(options).done(function (data) {
            var $target = $($form.attr("data-otf-target"));
            var $newHtml = $(data);
            $target.replaceWith($newHtml);
            $newHtml.effect("slide");

        });

        return false;
    };

    var submitAutocompleteForm = function (event, ui) {//-------------a5
        var $input = $(this);
        $input.val(ui.item.label);
        var $form = $input.parents("form:first");
        $form.submit();
    };

    var createAutocomplete = function () {
        var $input = $(this);
        var options = {
            source: $input.attr("data-otf-autocomplete"), //---- a2
            select: submitAutocompleteForm //------------a4
        };

        $input.autocomplete(options); //--------------a3
    };

    $("form[data-otf-ajax='true']").submit(AjaxFormSubmit);
    $("import[data-otf-autocomplete]").each(createAutocomplete);
})

如果这是一个愚蠢的错误，我深表歉意，我对 jquery 还很陌生，而且我没有得到任何错误结果，因此很难找到任何可能有帮助的文档。谢谢你的时间。

【问题讨论】：

标签： jquery ajax asp.net-mvc visual-studio-2013 autocomplete

【解决方案1】：

我认为问题在于这行代码：

$("import[data-otf-autocomplete]").each(createAutocomplete);

这段代码告诉 jQuery 去寻找一个“import”元素，但你真的想找到一个“input”元素。

$("input[data-otf-autocomplete]").each(createAutocomplete);

其他一切看起来都不错，我希望能解决问题。

【讨论】：

我不配！谢谢 Scott，也感谢您的教程，它们真的很有帮助！