jquery - jquery自动完成中的动态参数

Question

我无法在以下代码中动态传递参数过滤器。过滤器值取决于下拉列表 (id="dataLevel") 值，并用于相应地生成不同的自动完成建议。

HTML 代码：

<td>
<select id="dataLevel" name="dataLevel" 
    onchange="enableSearch(this);resetError(this);" >
    <option value="0">-- Select Level --</option>
    <option value="1">Group Level</option>
    <option value="2">Region Level</option>
    <option value="3">Sub Region Level</option>
    <option value="4">Branch Level</option>
</select>&nbsp;&nbsp;&nbsp;
</td>
<td>
    <input value="" name="searchTarget" id="searchTarget" type="text" />
</td>

JAVASCRIPT代码：

$(document).ready(function() {
    $("#searchTarget").autocomplete(
    "/jsp/AjaxInterface.jsp",{maxItemsToShow:15,extraParams:{filter:getTargetFilter()}}
    );
});

function getTargetFilter() {
    var targetType = document.getElementById('dataLevel').value;
    switch (targetType) {
    case '1':
        return 0;
        break;
    case '2':
        return 26;
        break;
    case '3':
        return 65;
        break;
    case '4':
        return 66;
        break;
    default:
        return 0;
        break;
    }
}

Answer 1

source您可以通过使用该选项并编写自己的 AJAX 调用来创建对 AJAX 的更多控制。

$(document).ready(function() {

    $("#searchTarget").autocomplete({
        source: function(request, response) {
            $.getJSON("/jsp/AjaxInterface.jsp", {
                term: request.term,
                filter: getTargetFilter()

            }, response);
        },
        maxItemsToShow: 15
    });
});

请参阅 API http://jqueryui.com/autocomplete/#multiple-remote中的 Mulitple-Remote 演示 和“查看源”

Answer 2

每次 Datalevel 值更改时，您都应该更改 Filter 选项。

function getTargetFilter() {
        var targetType = document.getElementById('dataLevel').value;
        switch (targetType) {
        case '1':
            return 0;
            break;
        case '2':
            return 26;
            break;
        case '3':
            return 65;
            break;
        case '4':
            return 66;
            break;
        default:
            return 0;
            break;
        }
    }

    //Change filter option each time dataLever value change's
    $("#dataLevel").change(function(){
         $("#searchTarget").autocomplete("option","filter",getTargetFilter());
    });