Question

我们使用jquery autocomplete创建了一个搜索表单，我们想要修改它的工作原理。

好的，这是我的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“postcode”引用，并且对于状态隐藏输入框也是如此。

我们如何操纵此javascript来执行此操作？我们已经阅读并尝试了几天，但还没有设法得到任何地方，所以我决定在这里发布堆栈。

谢谢：）

Answer 1

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

本地数据可以是一个简单的数组字符串，或包含对象数组中的每个项目，带有a 标签或价值属性或两者。该 label属性显示在建议菜单。价值将是之后插入到input元素中用户从中选择了一些东西菜单。如果只有一个属性指定，它将用于两者，例如。如果你只提供 value-properties，值也会用作标签。

所以：像这样修改你的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('');
  }
}

jquery-ui自动完成，操纵json＆amp; javascript解析隐藏的输入字段？

1 个答案: