MVC Classic ウィジェット > Wijcombobox > Wijcombobox タスク別ヘルプ > search メソッドを使用してテキストボックスに入力した文字を検索する |
次のコードは、search メソッドを使用して wijcombobox のテキストボックスに入力した 4 つの値を使用して都市名を検索する方法を示します。
ソースビュー |
コードのコピー
|
---|---|
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { var proxy = new wijhttpproxy({ url: "http://ws.geonames.org/searchJSON", dataType: "jsonp", data: { featureClass: "P", style: "full", maxRows: 12 }, key: 'geonames' }); var myReader = new wijarrayreader([{ name: 'label', mapping: function (item) { return item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName } }, { name: 'value', mapping: 'name' }, { name: 'selected', defaultValue: false }]); var datasource = new wijdatasource({ reader: myReader, proxy: proxy }); $("#tags").wijcombobox({ data: datasource, showTrigger: false, search: function (e, obj) { obj.datasrc.proxy.options.data.name_startsWith = obj.term.value; }, select: function (e, item) { $('#output').html('出身地: ' + item.label); } }); }); </script> <div class="main demo"> <!-- デモマークアップの開始 --> <label for="tags"> 都市を検索する4文字を入力します</label> <input id="tags" style="width: 300px" /> <p> <label id="output"> </label> </p> <!-- デモマークアップの終了 --> <div class="demo-options"> <!-- オプションマークアップの開始 --> <!-- オプションマークアップの終了 --> </div> </div> |