Question

我选择了jQuery UI自动完成控件和输入。

<select name="labels">
   ...some options
</select>

<input type="attr_type_input" class="attr_autocomplete ui-autocomplete-input">
<input type="attr_value_input" class="attr_autocomplete ui-autocomplete-input">

自动完成中显示的值应取决于select的值。

我的javascript代码如下：

$(document).ready(function(){

$( ".attr_autocomplete" ).each(function(){
    var type=$(this).attr("type");
    $(this).autocomplete( { 
        serviceUrl: '?', 
        params: { 
            action: 'attr_autocomplete',
            type:type,
            label:$("select[name=labels]").val()
        }
    }); 
});
});

问题是传递给服务器的标签值总是相同的，即使我更改了select。据我所知，这个数据结构在页面加载时形成一次。

问题是 - 如何传递select的实际值？

Answer 1

你是对的，这个结构是用页面加载选择的起始值初始化的。您可以切换到使用source参数的函数：

$(".attr_autocomplete" ).each(function(){
    var type=$(this).attr("type");
    $(this).autocomplete({
        source: function(req, autoCallback) {
            $.get('?', {
                term: req.term,
                action: 'attr_autocomplete',
                type:type,
                label:$("select[name=labels]").val()         
            }, function(response) {
                //perform any transforms needed on the data, then:
                autoCallback(response);
                //autoCallback is expecting an array of strings to display
            });
        }
    }); 
});

只要自动完成需要数据，就会执行此功能，因此每次都会读取选择的值，而不是在初始化时。

Answer 2

您没有检索更改后选择的值

试试这种方式

$("select[name=labels]").change(function(){
var changeValue=this.value;
});

demo

Answer 3

我刚遇到这个问题，并提出了这个解决方案。只是处理它的另一种方式。

如果您希望根据表单中其他字段的值设置自动填充结果集，则可以执行以下操作：

$(document).ready(function(){
    $('#alpha').change(function(){setLibraryAutoComplete();});
    setLibraryAutoComplete();
});
function setLibraryAutoComplete(){
    $('#beta').autocomplete({source: "TypeAhead?param1=ABC&param2="+$("#alpha").val()});
}

这会使用字段中的值设置页面加载时自动完成，但也会在源字段值更改时随时更新自动完成调用。

将select值传递给jQuery UI自动完成

3 个答案: