jQuery UI複数選択のオートコンプリートでHTMLページにデータが表示されない

Question

複数の選択肢があるオートコンプリートテキストボックスを使用しようとしています。しかし、私はjQueryUiのオートコンプリートコンポーネントでいくつかの問題を経験しています。オートコンプリート候補のリストは正しく表示されません。 は、サーバーから私はこのような値を持っている：

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

しかし、それは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()); 
      }   

     } 

UIで、それはこのようなものです 何かご意見は？私は別の問題に直面しました。つまり、データをもう一度ロードしていない問題を選択した後です。放火犯で

：

1回目：http://localhost:40315/api/Common/AutoCompleteListDataByTableName?tableName=ProductInfo&query=te

そして、2回目のGET： 私は何かを事前にlike this

感謝をしようと、次のよhttp://localhost:40315/api/Common/AutoCompleteListDataByTableName?tableName=ProductInfo&query=%2C+te

をGET。

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の配列を作成します。その配列の最後の項目をドロップします。ラベルは検索語の部分になり、IDの場合は空になります。最新の選択肢を配列の最後まで押して、それぞれのフィールドに書き込みます。

私たちが整理しなければならない最後のビットは、結果リストの項目を借りることです。 IDは必要ないので、基本的にそれを省略し、テキストラベルのみを作成します。

Ta da！コメントがあり、質問があれば教えてください。