Question

我很难显示所有可能的自动完成行。我使用db来存储所有行。现在我使用那个脚本：

     <script type="text/javascript">

     $(document).ready(function () {
         $("#Industry").autocomplete({
             source: function (request, response) {
                 $.ajax({
                     url: "/Employee/SuggestWorkExperienceIndustry",
                     type: "POST",
                     dataType: "json",
                     data: { Prefix: request.term },
                     success: function (data) {
                         response($.map(data, function (item) {
                             return { label: item.Industry, value: item.Industry };
                         }))

                     }
                 })
             },
             messages: {
                 noResults: "failure", results: ""
             }
         });
     });
</script>

控制器部分：

  [HttpPost]
    public JsonResult SuggestWorkExperienceIndustry(string Prefix)
    {
        using (var db = new HRMEntities())
        {
            var industryList = db.WorkExperienceIndustries.ToList();

            var industry = (from n in industryList
                              where n.Industry.ToLower().Contains(Prefix.ToLower())
                              select new { n.Industry });

            return Json(industry, JsonRequestBehavior.AllowGet);
        }
    }

它运行良好，但我不知道如何在用户点击字段时从数据库中获取所有行。

Answer 1

自动填充小部件minLength中有property，其默认设置为1。这意味着在开始请求数据之前，您需要在文本框中输入至少一个字符。将其设置为0，它应立即加载整个列表：

minLength: 0

但请确保这是您真正想要的行为，因为它确实会加载您的所有物品。可能不是非常用户友好。

更新。似乎没有内置的方法可以在焦点上触发搜索。但手动触发它真的很简单：

$("#Industry").autocomplete({
    source: ...
    messages: ...
    minLength: 0
}).focus(function () {
    $(this).autocomplete("search");
});

Answer 2

为那些有同样问题的人提高速度。最终的脚本应如下所示：

<script type="text/javascript">

     $(document).ready(function () {
         $("#VarName").autocomplete({

             source: function (request, response) {
                 $.ajax({
                     url: "/ControllerName/ActionName",
                     type: "POST",
                     dataType: "json",
                     data: { Prefix: request.term },

                     success: function (data) {
                         response($.map(data, function (item) {
                             return { label: item.VarName, value: item.VarName};
                         }))

                     }
                 })
             },
             messages: {
                 noResults: "failure", results: ""
             },
             minLength: 0,
         }).focus(function () {
             $(this).autocomplete("search")});
     });
</script>

自动填充显示所有值

2 个答案: