自動完成顯示所有值

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有一個屬性，其默認設置為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>