jquery-ui自动完成，操作json& javascript解析到隐藏的输入字段? [英] jquery-ui autocomplete, manipulate json & javascript to parse to hidden input fields?

问题描述

我们已经使用jquery自动完成功能创建了一个搜索表单，我们希望对其进行一些修改.

We have created a search form using jquery autocomplete, and we want to modify how it works a little.

好的，这是我的json响应:

Okay, so here is my json response:

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

这是我们的javascript:

Here is our 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返回的值.

Basically what we want to do, is when the search result is clicked, it currently fills the suburbs input box with "Liverpool, NSW (2170)" - as this is the value which json returns.

我们要更改的是，我们希望下拉菜单显示此结果，但是当单击时，我们希望它用json值"id"填充郊区输入字段-换句话说，只需填充郊区输入与利物浦".

What we want to change is, we want the drop down to show this result, but when clicked, we want it to fill the suburbs input field with the json value "id" - in other words, just fill the suburbs input with "Liverpool".

我们希望它将隐藏的输入框邮政编码值填充为jsons邮政编码"引用，而对于状态隐藏的输入框则相同.

We want it to fill the hidden input box postcodes value as jsons "postcode" reference and the same for states hidden input box.

我们将如何操纵此javascript来做到这一点?我们已经阅读和尝试了几天，但没有找到任何答案，所以我决定将其发布在堆栈上.

How would we manipulate this javascript to do this? We have been reading and trying for a few days but haven't managed to get any where, so I decided to post here on stack.

谢谢:)

推荐答案

根据文档(http://jqueryui.com/demos/autocomplete/):

According to the documentation (http://jqueryui.com/demos/autocomplete/):

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

The local data can be a simple Array of Strings, or it contains Objects for each item in the array, with either a label or value property or both. The label property is displayed in the suggestion menu. The value will be inserted into the input element after the user selected something from the menu. If just one property is specified, it will be used for both, eg. if you provide only value-properties, the value will also be used as the label.

所以:像这样修改您的JSON:

So: modify your JSON like this:

[{"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& javascript解析到隐藏的输入字段?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！