【ASP.Net MVC】在AspNet Mvc使用JQuery AutoComplete组件

    var submitAutoCompleted = function(event, ui) {
        var $input = $(this);
        $input.val(ui.item.label);
         
        .......
    };

    var createAutoCompleted = function() {
        var $input = $(this);
        var ajaxOption = {
            source: $input.attr("data-oft-ajax-autocompleted"), //告诉AutoComplete组件去哪里获取数据
            select:submitAutoCompleted                          //选择某选项后，要处理的逻辑
        };

        $input.autocomplete(ajaxOption);
    }


    $("input[data-oft-ajax-autocompleted]").each(createAutoCompleted);

        /// <summary>
        /// 
        /// </summary>
        /// <param name="term"></param>
        /// <returns>        
        //http://localhost:3951/Reviews/autocompleted?term=老
        //返回JSON,如下格式：
        //  [
        //    {"label":"老字号餐馆1000"},{"label":"老字号餐馆1001"},{"label":"老字号餐馆1002"},
        //    {"label":"老字号餐馆1003"},{"label":"老字号餐馆1004"},{"label":"老字号餐馆1005"},
        //    {"label":"老字号餐馆1006"},{"label":"老字号餐馆1007"},{"label":"老字号餐馆1008"},{"label":"老字号餐馆1009"}
        //  ]
        /// </returns>
        public ActionResult AutoCompleted(string term)
        {
            var model = _restaurantReviews.Where(r=>r.Name.ToLower().Contains(term.ToLower().Trim()))
                .Take(10)
                .Select(r=> new
                {
                    label = r.Name
                });

            //serialize model into JSON format
            return Json(model,JsonRequestBehavior.AllowGet);
        }

<input type="search" name="searchKey" 
　　　　data-oft-ajax-autocompleted="@Url.Action("AutoCompleted")" />

$(function () {

    var createAutoCompleted = function() {
        var $input = $(this);
        var ajaxOption = {
            source: $input.attr("data-oft-ajax-autocompleted") //告诉AutoComplete组件去哪里获取数据
        };

        $input.autocomplete(ajaxOption);
    }

    $("input[data-oft-ajax-autocompleted]").each(createAutoCompleted);
});       

注意，当没有看到效果，尝试检查是否存在如下原因：

　　如果上面的js代码是在原来已经存在的js文件（比如:abc.js）中添加，浏览器已经如果加载过该js文件，就有可能不会再加载js文件，

导致该js文件中不存在我们第三步添加的js代码。处理办法是：关掉浏览器，再打开。

<form method="post"
      action="@Url.Action("Index")"
      data-otf-ajax="true"
      data-otf-ajax-updatetarget="#restaurantList">
    <input type="search" name="searchKey" data-oft-ajax-autocompleted="@Url.Action("AutoCompleted")" />
</form>

$(function () {

    var submitAutoCompleted = function(event, ui) {
        var $input = $(this);
        $input.val(ui.item.label);

        var $form = $input.parents("form:first");
        $form.submit();
    };

    var createAutoCompleted = function() {
        var $input = $(this);
        var ajaxOption = {
            source: $input.attr("data-oft-ajax-autocompleted"), //告诉AutoComplete组件去哪里获取数据
            select:submitAutoCompleted                          //选择某选项后，要处理的逻辑
        };

        $input.autocomplete(ajaxOption);
    }

    $("input[data-oft-ajax-autocompleted]").each(createAutoCompleted);
});