jquery-ui 自动完成，操纵 json 和 javascript 来解析隐藏的输入字段？答案

【问题标题】：jquery-ui autocomplete, manipulate json & javascript to parse to hidden input fields?jquery-ui 自动完成，操纵 json 和 javascript 来解析隐藏的输入字段？
【发布时间】：2011-06-08 06:10:16
【问题描述】：

我们已经使用 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 来做到这一点？我们已经阅读和尝试了几天，但还没有成功，所以我决定在这里发帖。

谢谢你:)

【问题讨论】：

标签： javascript jquery json jquery-ui

【解决方案1】：

根据文档（http://jqueryui.com/demos/autocomplete/）：

本地数据可以是一个简单的数组字符串，或者它包含对象数组中的每个项目，其中一个标签或值属性或两者兼而有之。这标签属性显示在建议菜单。该值将是插入到输入元素之后用户从菜单。如果只有一个属性指定，它将用于两者，例如。如果您只提供价值属性，价值也将用作标签。

所以：像这样修改你的 JSON：

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

你的选择功能是这样的：

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

【讨论】：