jQuery自动完成设置隐藏的输入值 [英] jquery autocomplete set hidden input value

问题描述

我有以下有效的jquery自动完成功能.

I have the following jquery autocomplete which does work.

<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，这对用户没有意义.我添加了一个隐藏的输入，我想更改隐藏的输入的值.

The issue I'm facing is that with the current code, the value gets changed to pid which would make no sense to the user. I added a hidden input and I want to change the value of the hidden input.

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

我该怎么做?

推荐答案

尝试以下代码:

 <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>

这篇关于jQuery自动完成设置隐藏的输入值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！