jQuery的自動完成做的一切，但填補其自己的領域

Question

我有自動完成一個簡單的文本輸入就可以了：

<input type="text" class="span4" id="autoc1" name="agent" value=""> 

我使用下面的jQuery代碼到行動自動完成，並帶回數據。然後在一次點擊中，我想用返回的數據填充兩個輸入。一切工作，因爲它應該從實際領域與自動完成它不會被填充。

的Jquery：

$(function() { 
    // input id of field with autoc on   
    $("#autoc1").autocomplete({ 

     // php mysql data get 
     source: "/pages/includes/getAgent.php",    
     minLength: 2, 

     select: function(event, ui) { 
      //alert(ui.item.agent_name); // shows correct info, here only to test 

      //tried $(this) as below - didn't work 
      //$(this).val(ui.item.agent_name); 

       $('#autoc1').val(ui.item.agent_name); // tried with and without this, didn't work 
       $('#comm').val(ui.item.commission_percent); // this works perfectly!! 
     } 
    }).data("ui-autocomplete")._renderItem = function(ul, item) { 
     return $("<li>") 
     .append("<a>" + item.agent_name + "</a>") 
     .click(function(){$('#autoc1').val(item.agent_name)}) // added this. didn't work 
     .appendTo(ul); 
    }; 
}); 

這是JSON，如果有幫助返回：

[{"0":"agent a","agent_name":"agent a","1":"15","commission_percent":"15"}, 
{"0":"agent b","agent_name":"agent b","1":"10","commission_percent":"10"}] 

截殺完全的想法！

編輯

更多的HTML，它的基本形式，簡單

<form class="add_booking" method="post"> 

    <input type="text" placeholder="Date" class="span2" id="datepicker" name="date" value="<?=$showDate?>"> 

    <input type="text" placeholder="Booking Agent" class="span4 here" id="autoc1" name="agent" value="<?=$ds['agent']?>"> 

    <input type="text" placeholder="15" class="span1" name="commission" id="comm" value="<?=$ds['show_comm_percent']?>">% 

etc etc </form> 

Answer 1

在你的代碼的一部分，你正在做的：

data("ui-autocomplete")._renderItem 

你搞亂使用jQuery自動完成的內部數據和功能。你不應該那樣做。

我覺得爲什麼它不工作的原因是，你傳遞無效的東西放進自動完成：

有兩種支持的格式：字符串數組：「選擇1」， 「選擇2」 ]對象的數組與標籤和value屬性：[{ 標籤： 「選擇1」，值： 「VALUE1」}，...]

但是要傳遞在自定義數據。要做到這一點（不帶自動完成自身的功能干預），你應該使用功能數據來源：

Function: The third variation, a callback, provides the most flexibility and can be used to connect any data source to Autocomplete. The callback gets two arguments: 
A request object, with a single term property, which refers to the value currently in the text input. For example, if the user enters "new yo" in a city field, the Autocomplete term will equal "new yo". 
A response callback, which expects a single argument: the data to suggest to the user. This data should be filtered based on the provided term, and can be in any of the formats described above for simple local data. It's important when providing a custom source callback to handle errors during the request. You must always call the response callback even if you encounter an error. This ensures that the widget always has the correct state. 

給出的例子是：

$("#autocomplete").autocomplete({ 
    source: function(request, response) { 
      var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i"); 
      response($.grep(tags, function(item){ 
       return matcher.test(item); 
      })); 
     } 
}); 

正如你從服務器獲取數據，您需要在您對服務器進行ajax調用時存儲響應函數，並在返回數據時調用它。

如果您希望在使用自定義數據格式並覆蓋內部函數時繼續使用您的版本，爲了使其正常工作，您可以將return false添加到選擇功能中。

select: function(event, ui) { 
    $('#autoc1').val(ui.item.agent_name); // tried with and without this, didn't work 
    $('#comm').val(ui.item.commission_percent); // this works perfectly!! 
    return false; 
} 

這部作品的原因是，你現在手動設置字段的值，並從嘗試設置字段本身的值（和失敗，因爲它不知道返回false停止自動完成什麼將該字段設置爲）。

我知道的原因是我想在我的應用程序中自動提交自動提交選定的值，就好像用戶在選擇值後按下了輸入一樣。做到這一點的辦法是做：

autocompleteSelect: function(event, suggestItems){ 
    var suggestItem = suggestItems.item; 
    $(this.element).find('.tagInput').val(suggestItem.value); 
    $(this.element).find('.tagInput').blur(); //This triggers the onchange function elsewhere 
    $(this.element).find('.tagInput').val(""); 
    event.stopPropagation(); 
    return false; 
},