jQuery UI具有多選的自動完成功能在html頁面中不顯示數據

Question

我正嘗試使用具有多個選擇的自動填充文本框。但是，我遇到了jQueryUi的一個自動完成組件的一些麻煩。帶有自動填充建議的列表無法正確顯示。 從服務器我已經得到了價值這樣的：

[{"id":"1","text":"Test1 [1001]"},{"id":"2","text":"Test2 [1002]"}] 

但它不是在UI顯示。在UI是這樣的：

這裏是我的HTML代碼：

<label class="control-label">Group <span class="symbol required" aria-required="true"></span></label> 
<input type="text" class="form-control" id="HSModels" tablename="ProductInfo" required /> 
<input type="hidden" class="form-control" id="HSModelsID" required /> 

我的腳本：

$("#HSModels") 
      .bind("keydown", function (event) { 
       if (event.keyCode === $.ui.keyCode.TAB && 
       $(this).data("ui-autocomplete").menu.active) { 
        event.preventDefault(); 
       } 
      }) 
      .autocomplete({ 
       minLength: 2, 
       source: function (request, response) { 
        $.getJSON("/api/Common/AutoCompleteListDataByTableName", { tableName: "ProductInfo", query: request.term }, 
         response 
         ); 
       }, 
       search: function() { 
        // custom minLength 
        var term = extractLast(this.value); 
        if (term.length < 2) { 
         return false; 
        } 
       }, 
       focus: function() { 
        // prevent value inserted on focus 
        return false; 
       }, 
       select: function (event, ui) { 
        var HSModelsIDVal = $("#HSModelsID").val(); 
        HSModelsIDVal += ", " + ui.item.id; 
        $("#HSModelsID").val(HSModelsIDVal) 

        var terms = split(this.value); 
        // remove the current input 
        terms.pop(); 
        // add the selected item 
        terms.push(ui.item.value); 
        // add placeholder to get the comma-and-space at the end 
        terms.push(""); 
        this.value = terms.join(", "); 
        return false; 
       } 
      //}); 
     }); 
     function split(val) { 
      return val.split(/,\s*/); 
     } 
     function extractLast(term) { 
      return split(term).pop(); 
     } 

而在服務器端：

[HttpGet] 
public HttpResponseMessage AutoCompleteListDataByTableName(string tableName, string query = "") 
     { 
      GenericRepository<DropdownListData> repository = new GenericRepository<DropdownListData>(_csmDb); 

      try 
      { 
       var parameters = new List<SqlParameter> { new SqlParameter("@TableName", tableName), new SqlParameter("@QueryText", query) }; 
       List<DropdownListData> dataList = repository.ExecuteStoreProcedureToList("[GetAutoCompleteListDataByTableName]", parameters); 
       return Request.CreateResponse(HttpStatusCode.OK, dataList, RequestFormat.JsonFormaterString()); 
      } 
      catch (Exception ex) 
      { 
       return Request.CreateResponse(HttpStatusCode.OK, new Confirmation { output = "error", msg = ex.Message }, RequestFormat.JsonFormaterString()); 
      }   

     } 

有什麼想法嗎？而且我還面臨另一個問題，即選擇一個後，它不會再次加載數據。

在螢火蟲：

第1次：GET http://localhost:40315/api/Common/AutoCompleteListDataByTableName?tableName=ProductInfo&query=te

和第2時間： GET http://localhost:40315/api/Common/AutoCompleteListDataByTableName?tableName=ProductInfo&query=%2C+te

我下面要做的事情like this

在此先感謝。

Answer 1

要完成你想要的，你必須按照你提到的例子和'Custom Data & Display'的例子。以下是我建議：

工作實例：https://jsfiddle.net/Twisty/gr5LL10o/

jQuery的

$(function() { 
    $("#HSModels") 
    .bind("keydown", function(event) { 
     if (event.keyCode === $.ui.keyCode.TAB && 
     $(this).data("ui-autocomplete").menu.active) { 
     event.preventDefault(); 
     } 
    }) 
    .autocomplete({ 
     minLength: 2, 
     source: function(request, response) { 
     /* 
      $.getJSON("/api/Common/AutoCompleteListDataByTableName", { 
       tableName: "ProductInfo", 
       query: request.term 
      }, 
      response 
     ); 
      */ 
      // Example search for demonstration, using jsfiddle AJAX system 
     $.ajax({ 
      url: "/echo/json/", 
      type: "POST", 
      data: { 
      json: JSON.stringify([{ 
       "id": "1", 
       "text": "Test1 [1001]" 
      }, { 
       "id": "2", 
       "text": "Test2 [1002]" 
      }, { 
       "id": "3", 
       "text": "Apple [1003]" 
      }, { 
       "id": "4", 
       "text": "Banana [1004]" 
      }]) 
      }, 
      success: function(data) { 
      var results = []; 
      var term = extractLast(request.term).toLowerCase(); 
      $.each(data, function(k, v) { 
       if (v.text.toLowerCase().indexOf(term) === 0) { 
       console.log("Found " + v.text); 
       results.push(v); 
       } 
      }); 
      console.log("Responding with ", results); 
      response(results); 
      } 
     }); 
     }, 
     focus: function() { 
     // prevent value inserted on focus 
     return false; 
     }, 
     select: function(event, ui) { 
     /* 
     var HSModelsIDVal = $("#HSModelsID").val(); 
     HSModelsIDVal += ", " + ui.item.id; 
     $("#HSModelsID").val(HSModelsIDVal) 
     */ 
     var labels = split(this.value); 
     var ids = split($("#HSModelsID").val()); 
     // remove the current input 
     labels.pop(); 
     ids.pop(); 
     // add the selected item 
     labels.push(ui.item.text); 
     ids.push(ui.item.id); 
     // add placeholder to get the comma-and-space at the end 
     labels.push(""); 
     ids.push(""); 
     this.value = labels.join(", "); 
     $("#HSModelsID").val(ids.join(",")); 
     return false; 
     } 
    }).autocomplete("instance")._renderItem = function(ul, item) { 
     return $("<li>") 
     .append("<div>" + item.text + "</div>") 
     .appendTo(ul); 
    }; 

    function split(val) { 
    return val.split(/,\s*/); 
    } 

    function extractLast(term) { 
    return split(term).pop(); 
    } 
}); 

沒有什麼向外不對您的原代碼。您的數據比標準數據陣列更復雜。你還做了更多的事情，而不僅僅是列表。

出於示例的目的，我將您的AJAX調用繞過了您的API。我假設從查詢返回的數據將是這樣的：

[{ 
    "id": "1", 
    "text": "Test1 [1001]" 
}, { 
    "id": "2", 
    "text": "Test2 [1002]" 
}, { 
    "id": "3", 
    "text": "Apple [1003]" 
}, { 
    "id": "4", 
    "text": "Banana [1004]" 
}] 

這是我的數據。例如，您的數據就已經被過濾。因此，在你的腳本成功功能將會更簡單，更象：

success: function(data){ 
    response(data), 
}, 

在選擇階段，我們要做多一點的結果。我們想創建一個標籤和ID數組。因此，當用戶選擇一個特定的標籤時，我們更新該數組，並更新我們稍後可以使用的相應ID的數組。

我這樣做，我創建了一個當前選定的所有標籤數組和當前選定的所有標識數組。我們刪除該數組中的最後一個條目，因爲標籤將成爲搜索詞的一部分，而對於這些標識，這將是空的。我們將最近的選擇推到數組的末尾，並將它們寫入各自的字段。

我們必須做的最後一件事是清理結果列表項。由於我們不需要ID，所以我們基本省略了這一點，並僅僅使用Text標籤。

大達！評論並讓我知道你是否有疑問。