jQueryオートコンプリート - JSON結果がまだ準備されていない場合でも入力を入力してください

Question

jQuery .autocomplete()機能を使用して検索する製品のデータベースがあります。製品は名前またはIDで検索されています。項目を含むリストが表示されると、ユーザーはリストから製品を選択して、プロダクトIDと「税金」や「プロダクト名」のような事前定義済みの値を持つ他のフィールドを入力することができます。レイアウトは、このようなものです：

HTMLコード

<input type="text" id="productID" /> 
<input type="text" id="productName" /> 
<input type="text" id="quantity" /> 
<input type="text" id="taxes" /> 

... and more relative inputs 

<input type="text" id="price" /> 
<!-- add product to cart --> 
<input type="submit" value="Add to cart" /> 

形の意味手動で未知の充填または既知のフィールドを交互にしながら、一定によってShopCartに製品を挿入することです。

今、私は多くの製品IDをメモリで知っていて、すぐに入力することができるので、必要なフィールドをすばやく調整し、「ENTER」を押してカートに商品を挿入できます。問題は、私が.autocomplete()フィールドを離れると、結果のリストが消えて製品が選択されないということです。

私のjQueryのは、ここで

var cache = {}; 
$("#productID").autocomplete({ 
    minLength: 1, 
    autoFocus: true, 
    source: function (request, response) { 
     var term = request.term; // search-term 
     // check if the term is already cached 
     if (term in cache) { 
      response(cache[ term ]); // return cached result 
      return; 
     } 
     // get results from remote script 
     $.getJSON("/autocomplete.php", request, function (data) { 
      cache[ term ] = data; // cache the result for this term 
      response(data); 
     }); 
    }, 
    select: function (event, ui) { 
     // pre-populate fields of the product 
     $("#productName").val(ui.item.name); 
     $("#taxes").val(ui.item.taxes); 
     $("#price").val(ui.item.price); 
    } 
}; 

、私が表示され、その後、製品を選択する「TAB」を押して応答を待つ必要があります。

フィールドから「タップ」したときにJSON応答を継続させる方法はありますか？また、リストの最初の項目が選択されていますか？これはかなり簡単な作業なので、製品を選択するたびに応答を待つのが好きではありません。

EDIT

@raduationのおかげで解決策が見つかりました！

// first altered the autocomplete-select to point to a Js-function 
var cache = {}; 
$("#productID").autocomplete({ 
    minLength: 1, 
    autoFocus: true, 
    source: function (request, response) { 
     var term = request.term; // search-term 
     // check if the term is already cached 
     if (term in cache) { 
      response(cache[ term ]); // return cached result 
      return; 
     } 
     // get results from remote script 
     $.getJSON("/autocomplete.php", request, function (data) { 
      cache[ term ] = data; // cache the result for this term 
      response(data); 
     }); 
    }, 
    select: function (event, ui) { 
     // pre-populate fields of the product 
     selectValueAutocomplete(ui.item, $(this)); 
    } 
}; 

// function to insert item's values in the fields 
function selectValueAutocomplete(item, input) 
{ 
    input.val(item.value); 
    $("#productName").val(item.name); 
    $("#taxes").val(item.taxes); 
    $("#price").val(item.price); 
} 

そして私は焦点を当てたりしない場合はどうするかをチェックするためのEventListenerを追加しました：ここに私がやったことある

$(document) 
    .on("focusout", "#productID", function() { 
     $(this).addClass("selectFirst"); 
    }) 
    .on("focus", "#productID", function() { 
     $(this).removeClass("selectFirst"); 
    }) // Here I invoke the jQuery.autocomplete()'s response event 
    .on("autocompleteresponse", "#productID", function(event, ui) { 
     if($(this).hasClass("selectFirst")) 
     { // select first item from response 
      selectValueAutocomplete(ui.content[0], $(this)); 
     } 
    }); 

Answer 1

タブをリッスンテキスト入力フィールド上のキーイベントリスナーを追加しますキー。 Tabキーを押すと、テキスト入力に「最初のプロダクトマッチで生成する」というプロパティを設定します。例：$('#productId').prop('populateFirst',true);

次に、getJSONコールバック関数で、このプロパティが存在するかどうかを確認し、最初の製品を設定します。これが行われた後（またはajaxエラーがある場合）は、プロパティを削除して、次回のオートコンプリートの使用を妨げないようにします。

Answer 2

ソースオプションにautocomplete.phpと指定するだけの理由はありますか？

$("#productID").autocomplete({ 
    minLength: 1, 
    autoFocus: true, 
    source: "autocomplete.php" 
    }, 
    select: function (event, ui) { 
     // pre-populate fields of the product 
     $("#productName").val(ui.item.name); 
     $("#taxes").val(ui.item.taxes); 
     $("#price").val(ui.item.price); 
    } 
}; 

EDIT

は、それが作品になっている.... this Fiddleを参照してください。
（私はもちろんのソースを、シミュレート...しかし、同じように動作するはずです。）あなたの提案のための