jquery 自动完成设置隐藏输入值

Question

我有以下 jquery 自动完成功能。

<input type="hidden" id="autocompletePid" autocomplete="off" />

相关JS

<script type="text/javascript">
    $(function() {

        $("#autocomplete").autocomplete(
                {
                    source : function(request, response) {
                        $.ajax({
                            type : 'GET',
                            url : "/live-search" + '?term=' + request.term,
                            success : function(data) {
                                response($.map(data, function(item) {
                                    return {
                                        label : item.street + ' '
                                                + item.city.city + ', '
                                                + item.state.stateCode
                                                + ' '
                                                + item.zipcode.zipcode,
                                        value : item.pid
                                    }
                                }));
                            },
                            minLength : 3
                        })
                    }

                });

    });
</script>

相关HTML

<div id="tabs-1" class="ui-tabs-hide">
    <input type="text" id="autocomplete" autocomplete="off"
        placeholder="Enter an address or city..." /> <input
        type="submit" value="GO" />
</div>

我面临的问题是，使用当前代码，该值更改为 pid，这对用户来说毫无意义。我添加了一个隐藏输入，我想改变隐藏输入的值。

<input type="hidden" id="autocompletePid" autocomplete="off" />

我该怎么做？

Answer 1

试试下面的代码：

 <script type="text/javascript">
        $(function() {

            //Create a array call 'auto_array'
            var auto_array = {};
            var label = '';
            $("#autocomplete").autocomplete(
                    {
                        source : function(request, response) {
                            $.ajax({
                                type : 'GET',
                                url : "/live-search" + '?term=' + request.term,
                                success : function(data) {
                                    response($.map(data, function(item) {
                                    label  = item.street + ' '+ item.city.city  + ', '+ item.state.stateCode + ' '+ item.zipcode.zipcode;

                                    //Put the id of label in to auto_array. use the label as key in array
                                    auto_array[label] = item.pid;
                                    return label;

                                    }));
                                },

                            })
                        },

                       minLength : 3,

                        //On select the label get the value(id) from auto_array and put in hidden input field 'autocompletePid'
                         select: function(event, ui) {
                         console.log(auto_array);
                         $('#autocompletePid').val(auto_array[ui.item.value]);
                        }

                    });

        });
    </script>

Answer 2

步骤：

更改您的 return 值以保存 pid。将标签和值设置为您的显示值：

var label = item.street + ' '
            + item.city.city + ', '
            + item.state.stateCode
            + ' '
            + item.zipcode.zipcode;
return {
    label : label,
    value : label,
    pid : item.pid
}

从自动完成绑定到 select 函数以根据需要将值设置到不同的字段

select: function (event, ui) {
    $(autocompletePid).val(ui.item ? ui.item.pid : "");
}

这是完整的工作 fiddle：https://jsfiddle.net/q9zyejd0/16/。备注：

我将隐藏输入更改为禁用文本，因此您可以看到值的变化。
我用 mocky.io 模拟了一个 API 调用。它会忽略键入的值，只是 return 是您在代码中定义的常量地址。
请注意，当您从文本框中删除值时，select 不会触发。您应该手动绑定到 change（这将使隐藏字段在您将焦点移出文本字段时更新，有点丑陋，但效果更好），或者使用 $(autocomplete).focusout 手动修复它。

jquery 自动完成设置隐藏输入值

jquery autocomplete set hidden input value

jquery

jquery-ui-autocomplete