Question

我在使用OdeToFood pluralsight项目进行自动完成时遇到了一些麻烦。当我在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相当新，我没有得到任何错误结果，因此很难找到任何可能有用的文档。谢谢你的时间。

Answer 1

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

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

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

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

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

自动完成未显示/正在使用OdeToFood

1 个答案: