jQuery/javascriptを勉強中のものです。よろしくお願いします。
テキストボックスでAmazon.co.jpのキーワードサジェスト機能を使いたいと思いまして
調べたところ、
jQueryでAmazon/Googleのsuggest機能を実装する
http://d.hatena.ne.jp/tatsu-no-toshigo/20140428/1398667460
こちらのページでJquery UI のautocompleteを用いて出来る事が解説されておりましたので、
こちらを参考に実装しようとしています。
サンプルコード
<body>
<input type="text" name="Keyword" id="Keyword" value="" placeholder="Amazon検索">
<div id="result" style="padding: 20px; background-color: #F4F4F4;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/autosize.js/1.18.17/jquery.autosize.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#Keyword').autocomplete({
source: function(request, response) {
$.ajax({
url: "http://completion.amazon.co.jp/search/complete",
data: {
mkt: '6',
method: 'completion',
'search-alias': 'aps',
q: request.term
},
dataType: "jsonp",
type: "GET",
success: function(data) {
response(data[1]);
}
});
},
delay: 300,
select: function(event, ui) {
if (ui.item) {
var text = ui.item.value;
$('#result').prepend(text + "<br>");
}
}
});
});
</script>
</body>
しかし、これを動かすと、日本語を入力している途中で実行されてしまいます。
iOS(iOS8のSafari)などでは、日本語入力中に表示された候補ワードを選択すると、
入力中のひらがなと選択したワードが混ざってしまい、意図しない表示となってしまいます。
例えば 「あま」と入力し、確定しないまま、表示された候補リストから「Amazon」を選択すると、「あまzon」となってしまいます。
そこで、
jQuery UI Autocompleteウィジェットでの日本語使用
http://shiba-sub.sakuraweb.com/?p=5415
こちらのページで、 日本語入力中は検索を実行させない処理についての記載があったため、コードを以下のように書きなおしました。
<body>
<input type="text" name="Keyword" id="Keyword" value="" placeholder="Amazon検索">
<div id="result" style="padding: 20px; background-color: #F4F4F4;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/autosize.js/1.18.17/jquery.autosize.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#Keyword').autocomplete({
source: function(request, response) {
$.ajax({
url: "http://completion.amazon.co.jp/search/complete",
data: {
mkt: '6',
method: 'completion',
'search-alias': 'aps',
q: request.term
},
dataType: "jsonp",
type: "GET",
success: function(data) {
response(data[1]);
}
});
},
delay: 300,
select: function(event, ui) {
if (ui.item) {
var text = ui.item.value;
$('#result').prepend(text + "<br>");
}
}
search: function(event, ui) {
if (event.keyCode == 229) return false;
return true;
},
open: function() {
$(this).removeClass("ui-corner-all");
}
})
.keyup(function(event) {
if (event.keyCode == 13) {
$(this).autocomplete("search");
}
});
});
</script>
</body>
しかし、このように実装しても、日本語入力中にキーワードの候補が表示されてしまいます。
上記のコードに何か問題はありますでしょうか。
日本語入力中にオートコンプリートを実行させず、確定後に初めて実行させる他の方法はありますでしょうか。
ご指導よろしくお願いします。