JQuery UIオートコンプリートAJAXコール

Question

私は、ajax呼び出しを使用してデータベースからの提案で自動完成する検索フィールドを作成しようとしています。アイテムを選択すると、検索フィールドを更新したいと思います。現在、このテキストボックスに何かを入力すると、空の選択が返されます。どんな助けもありがとう。

ここでは、推奨される変更で更新されたコードですが、今は空のリストを取得しています。

function autoCompleteCheckRun() { 
$('#autocompleteCR') 
      .autocomplete({ 
       minLength: 0, 
       source: function (request, response) { 
        $.ajax({ 
         type: "POST", 
         contentType: "application/json; charset=utf-8", 
         url: './PayInvoicesWS.asmx/GetCheckRun', 
         data: "{'description':'" + document.getElementById('autocompleteCR').value + "'}", 
         dataType: "json", 
         success: function (data) { 
          var rows = autocompleteJSONParseCode(data); 
          response(rows); 
         }, 
         error: function (result) { 
          alert("Error"); 
         }, 
         select: function (event, ui) { 
          var checkRunData = $("#CheckRunDescription"); 
          var checkRunID = $("#CheckRunID"); 
          checkRunData.val(ui.item.label); 
          checkRunID.val(ui.item.value); 


         } 
        }); 
       } 
      }); 
} 

function autocompleteJSONParseCode(data) { 
    var rows = new Array(); 
    var rowData = null; 
    for (var i = 0, dataLength = data.d.length; i < dataLength; i++) { 
     rowData = data.d[i]; 
     // alert(rowData.term2+":"+rowData.term1);//uncomment to see data as it parses 
     rows[i] = { 
      value: rowData.CheckRunID, 
      label: rowData.Description 
     }; 
    } 

    return rows; 
} 

div class="ui-widget"> 
         <label for="autocompleteCR" id="checkRunLabel">Check Run Lookup:</label> 
         <input type="text" id="autocompleteCR" /> 
        </div> 

Answer 1

あなたはselect機能を置き忘れてきました。 source関数からそれを移動して、source関数に平行に置きます。

$('#autocompleteCR') 
      .autocomplete({ 
       minLength: 0, 
       source: function (request, response) { 
        $.ajax({ 
         type: "POST", 
         contentType: "application/json; charset=utf-8", 
         url: './PayInvoicesWS.asmx/GetCheckRun', 
         data: "{'description':'" + document.getElementById('autocompleteCR').value + "'}", 
         dataType: "json", 
         success: function (data) { 
          var rows = autocompleteJSONParseCode(data); 
          response(rows); 
         }, 
         error: function (result) { 
          alert("Error"); 
         } 
        }); 
       }, 
       select: function (event, ui) { 
          var checkRunData = $("#CheckRunDescription"); 
          var checkRunID = $("#CheckRunID"); 
          checkRunData.val(ui.item.label); 
          checkRunID.val(ui.item.value); 


       } 
      }); 

私はあなたが探しているもののために働く例を作っています

function(el) { 
return { 
    value: el.CheckRunID, 
    label: el.Description 
    }; 
})); 

に

https://jsfiddle.net/gschambial/d0g3dLvu/19/

$("#tags").autocomplete({ 
    source: availableTags, 
    select: function(event, ui) { 
      alert('Label is :' + ui.item.label + ' and Value is : ' +ui.item.value); 
    } 
}); 

変更

function(el) { 
return { 
    CheckRunID: el.CheckRunID, 
    Description: el.Description 
    }; 
})); 

AJAX呼び出しの成功関数内data.dする変数を割り当てる：

、代わりに

checkRunData.val(ui.item.CheckRunID + ui.item.Description); 

使用

checkRunData.val(ui.item.label + ui.item.value); 

Answer 2

これは、それが動作するようになったものですの。また、@ gschambialの私の選択機能がどこにあるかについての提案もあります。もともと、ソース関数の中にいたのですが、一度それを外に移動すると、リストの値をdom要素に代入することができました。

function autoCompleteCheckRun() { 
$('#autocompleteCR') 
      .autocomplete({ 
     minLength: 0, 
     source: function(request, response) { 
      $.ajax({ 
       type: "POST", 
       contentType: "application/json; charset=utf-8", 
       url: './PayInvoicesWS.asmx/GetCheckRun', 
       data: "{'description':'" + document.getElementById('autocompleteCR').value + "'}", 
       dataType: "json", 
       success: function(data) { 
        var el = data.d; 
        response($.map(el, 
         function(el) { 
          return { 
           label: el.Description, 
           value: el.CheckRunID 
          } 
         })); 
       }, 
       error: function(result) { 
        alert("Error"); 
       } 
      }); 
      }, 
      select: function (event, ui) { 
        $("#CheckRunDescription").val(ui.item.label); 
        $("#CheckRunID").val(ui.item.value); 
       event.stopPropagation(); 
      } 

      }); 
     } 

ビュー：

<div class="ui-widget"> 
         <label for="autocompleteCR" id="checkRunLabel">Check Run Lookup:</label> 
         <input type="text" id="autocompleteCR" /> 
        </div> 
<div class="divTableCell"> 
       <label for="CheckRunDescription" id="checkRunDescriptionLabel">Description:</label> 
       <input type="text" id="CheckRunDescription" style="width: 270px;" /> 
      </div>