Jquery typahead autocomplete - 将值传递给隐藏字段

时间:2018-02-11 09:31:29

标签: jquery autocomplete

所以我一直在搜索几个小时,并尝试了无数的例子,一旦选择了自动完成建议而没有运气就将值传回隐藏字段。

有人可以帮助我以下是我的代码。一旦选择了自动完成建议,我需要将lat_lng值传回隐藏字段。

 // this is the typahead function
 $('.typeahead').typeahead({
hint: true,
highlight: true,
minLength: 3,
limit: 2
}, 
{ 
templates: {
    header: '<h3 class="dropdown_ac_div">Cities</h3>'
},
source: function(q, cb) {
    return $.ajax({
        dataType: 'json',
        type: 'get',
        url: url_proto +'//mydomain.com/autocomplete.php?q=' + q,
        chache: false,
        success: function(data) {
            var result=[];
          $(data).each(function(index,val){

            if (val.city_data.type=='city'){ 
                 $('#hidden-input').val(val.city_data.name);
              result.push({
                value: val.city_data.name +"*"+ val.city_data.lat_lng,

              });

            }
            return  cb(result);       
          });
        }
    });
}
});

这是html输入字段

<input type="hidden" id="hidden-input" />

2 个答案:

答案 0 :(得分:0)

如果您的ajax回调和if检查一切正常,那么如果由于某种原因jQuery值设置对hidden输入不起作用,您可以尝试使用vanila js:

document.getElementById("hidden-input").value = val.city_data.name;

答案 1 :(得分:0)

我想出了如何填充隐藏字段。希望这会对某人有所帮助。以下是解决方案。

// I added a var before $('.typeahead') and a key: about halfway down

var typaheadvar=$('.typeahead').typeahead({
hint: true,
highlight: true,
minLength: 3,
limit: 2
}, 
{ 
templates: {
    header: '<h3 class="dropdown_ac_div">Cities</h3>'
},
source: function(q, cb) {
    return $.ajax({
        dataType: 'json',
        type: 'get',
        url: url_proto +'//mydomain.com/autocomplete.php?q=' + q,
        chache: false,
        success: function(data) {
            var result=[];
          $(data).each(function(index,val){

            if (val.city_data.type=='city'){ 
              result.push({
                value: val.city_data.name,
                key: val.city_data.lat_lng, // this key contains lat_lng for hidden input field
              });
            }
             return  cb(result);   
          });
        }
    });
}
});

然后。

    // now to pass back value of selected suggestion to hidden field
     typaheadvar.on('typeahead:selected', function($e, datum) {  //     suggestion selected
      $('#hidden-input').val(datum['key']); // now to populate hidden value
      });