前提・実現したいこと
jQuery UI の Autocompleteを使って、サジェスト機能を実装しているのですが
不具合がおきております。
こんな感じのjsonデータを読み込んでいます。
('/data/prefecture.json')
[ {"kana": "ほっかいどう", "name": "北海道"}, {"kana": "あおもり", "name": "青森"}, {"kana": "あきた", "name": "秋田"}, {"kana": "いわて", "name": "岩手"}, {"kana": "やまがた", "name": "やまがた"}, ・・・つづく ]
やりたいこととしてはサジェスト機能で
$("input[name='strKeyWord']") にひらがなを1文字、入力したら
部分一致で、絞り込んで都道府県の候補を出すというものです。
※通常はselect/option を使うようなものがメジャーですが、これは実際とは異なるものです。
例としてあげたものです。
autocompleteの記述は下記です。
let result $.ajax({ url : '/data/prefecture.json', dataType : 'json', success: function(autocompleteData){ $("input[name='strKeyWord']").autocomplete({ source: function(request, response) { let matcher = new RegExp("(" + $.ui.autocomplete.escapeRegex(request.term) + ")"); result = []; $.each(autocompleteData, function(i, v) { if (v.kana.match(matcher)) { result.push(v.name); } }); response(result); }, select: function(event, ui) { $("input[name='strKeyWord']").blur(); } }); } }); // submit $('input[type="submit"]').click(function(e){ $('form[name="find-form"]').submit(); });
発生している問題
候補は表示されているのですが、ひらがなが残ってしまう現象が起きています(iPhoneのみ)
たとえば
「ほ」 と入力 → 北海道を選択したら、inputには、「北海道ほ」が表示
「あ」 と入力 → 秋田を選択したら、inputには、「秋田あ」が表示
という具合です。
試したこと
最初、valueを上書きしてみようかと四苦八苦していたのですが、うまく行きませんでした。
補足情報(バージョン)
jQuery は、jquery-3.3.1
jqueryuiは、1.12.1
のバージョンをそれぞれCDNで読み込んでいます。
もし詳しい方がいらっしゃいましたら、解決方法等をご教示いただけますと助かります。
宜しく御願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/12/21 11:30
2018/12/25 08:35