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>

ジャバスクリプトコード:

$(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および「View Source」で 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());
    });