jquery-ui 自動完成，操作 json 和 javascript 以解析到隱藏的輸入字段？

Question

我們使用 jquery 自動完成創建了一個搜索表單，我們想稍微修改一下它的工作方式。

好的，這是我的 json 回復：

[{"id":"Liverpool","postcode":"2170","state":"NSW","value":"Liverpool, NSW (2170)"}]

這是我們的 javascript：

$(function() {
    function split( val ) {
        return val.split( /,\s*/ );
    }
    function extractLast( term ) {
        return split(term).pop();
    }

    $( "#suburbs" )
        // don't navigate away from the field on tab when selecting an item
        .bind( "keydown", function( event ) {
            if ( event.keyCode === $.ui.keyCode.TAB &&
                    $( this ).data( "autocomplete" ).menu.active ) {
                event.preventDefault();
            }
        })
        .autocomplete({
            source: function( request, response ) {
                $.getJSON( "http://www.path-to-our-autocomplete.com/search.php", {
                    term: extractLast( 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 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;
            }
        });
});

我們的 HTML：

<input type="text" id="suburbs" name="suburbs" class="ui-autocomplete-input" role="textbox" aria-autocomplete="list" aria-haspopup="true">
<input type="hidden" id="postcode" name="postcode" value="" />
<input type="hidden" id="state" name="state" value="" />

基本上我們想要做的是，當點擊搜索結果時，它當前用"Liverpool, NSW (2170)"填充郊區輸入框 - 因為這是 json 返回的值。

我們想要改變的是，我們希望下拉顯示這個結果，但是當點擊時，我們希望它用 json 值“id”填充郊區輸入字段 - 換句話說，只需用“利物浦”填充郊區輸入”。

我們希望它填充隱藏輸入框郵政編碼值作為 jsons“郵政編碼”參考，並且對於狀態隱藏輸入框也是如此。

我們將如何操縱這個 javascript 來做到這一點？ 我們已經閱讀和嘗試了幾天，但還沒有成功，所以我決定在堆棧上發帖。

謝謝：）

Answer 1

根據文檔（http://jqueryui.com/demos/autocomplete/）：

本地數據可以是一個簡單的字符串數組，或者它包含數組中每個項目的對象，具有 label 或 value 屬性或兩者兼有。 label 屬性顯示在建議菜單中。 用戶從菜單中選擇某些內容后，該值將插入到輸入元素中。 如果只指定了一個屬性，它將同時用於這兩個屬性，例如。 如果您僅提供值屬性，則該值也將用作 label。

所以：像這樣修改你的 JSON ：

[{"value":"Liverpool","postcode":"2170","state":"NSW","label":"Liverpool, NSW (2170)"}];

你的 select function 像這樣：

select: function( event, ui ) {
  if (ui.item) {
    $('#postcode').val(ui.item.postcode);
    $('#state').val(ui.item.state);
  }
  else {
    $('#postcode').val('');
    $('#state').val('');
  }
}