jquery autocomplete実装(自動充填および連選)

4425 ワード

最近はプロジェクトでjquery autocompleteを使っているので、使い勝手がいいと思います.主に高速自動充填を解決し、連選問題も解決できます.たとえば、国を選択し、選択領域を特定するという問題があります.
まずjqueryとautocompleteパッケージがあります.添付ファイルに添付してあります.
ページは次のとおりです.
search.flt



<tr>
<td>  ：</td>
<td align="left">
<input type="text" id="country" autocomplete="on"/>
<input type="hidden" id="countryId" name="conditions.country.value"/>
</td>
<td>  ：</td>
<input type="text" id="region" autocomplete="on">
<input type="hidden" id="regionId" name="conditions.region.value" >
</td>
</tr>

注意inputにはautocomplete=「on」属性があります.この属性は重要です.2つのパラメータをクエリーする必要がある場合は、autocompleteにパラメータを渡す必要があります.これは、パラメータを持つことを許可することを意味します.当初はこの項目を無視していましたが、autocompleteはデフォルトでパラメータを持っていて、actionで「q」で受信します.これは死んだと書かれています.たとえばinputボックスに「china」と入力すると、actionに伝わるqはchinaに等しい.
しかし、ビジネスは常に変化します.例えば、countryが選択し、regionを選択する場合、このregionはcountry idに基づいて領域の範囲を制限する必要があります.このときregionをクエリーする2つのパラメータがあります.1つはあなたが入力したパラメータで、1つはcountry idです.このときautocompleteはq 1個では足りません.Autocompleteはパラメータを設定するためにこのextraParams:{}を選択しなければならないが、ページがロードされると、このパラメータは変更できず、静的なパラメータをロードするためにしか使用できないようだ.
country.js


$(document).ready(function() {
    autocompleteCountryName($("#country"));
});

function autocompleteCountryName(obj, callBackFn) {
    $(obj).autocomplete(
            ".." + "/hotelconfig/findCountry.action",
    {
        delay:200,
        minChars:2,
        matchSubset:1,
        matchContains:1,
        cacheLength:1,
        onItemSelect:callBackFn || selectItemForCountry,
        formatItem:formatItem,
        maxItemsToShow:20,
        width:300,
        autoFill:false
    });
}


function selectItemForCountry(li) {
    var $span = $("span:first", li);
    var id = $span.text();
    var name = $span.next().text();
   $("#countryId").val(id);
    $("#country").val(name);


    var completer = document.getElementById("region").autocompleter;
    completer.setExtraParams({"countryId" : $("#countryId").val()});
    completer.flushCache();
}

function formatItem(row) {
    return row[0];
}

country inputボックスに国を入力すると、autocompleteCountryNameメソッドが自動的にトリガーされ、action findCountryメソッドが動的に呼び出されます.
Action


...
private q;
private List<HotelConfigCondition> hotelConfigConditions = new ArrayList<HotelConfigCondition>();

public void findCountry(){
  hotelConfigConditions = service.findCountrys(q);
.....
return SUCCESS
}

このactionはリストをループ出力するページを返します
struts.xml


<action name="findCountry" class="...HotelConfigByProviderAction" method="findCountry">
<result name="success">/pages/hotelconfigbyprovider/hotelconfigforselect.ftl</result>
</action>

hotelconfigforselect.ftl


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<@s.iterator value="hotelConfigConditions">
<span style="display:none;"><@s.property value="id"/></span><span><@s.property value="name"/></span>
 </@s.iterator>

見てみようjs
このコード:


var completer = document.getElementById("region").autocompleter;
    completer.setExtraParams({"countryId" : $("#countryId").val()});
    completer.flushCache()

彼はパラメータを割り当てに来たのです.国を選択するとcountryIdが生成され、countryIdが領域autocompleteに付与され、領域が再クエリされるとactionでこのcountryIdが得られます.アクションでString countryIdを定義します.このcountryIdを得ることができます.
selectItemForCountry(li)メソッドは、国を循環してリストを取得し、必要なデータを処理することです.
ここでftlページでLIST autocompleteをループすると自動的にliタグが付けられます.
そして私たちはこのliラベルを通じて私たちのデータを得ることができます.

中国語漢字からデジタルコードへの変換方法【回転】

[D言語]ある型の全メンバーの属性を取得する