4

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>

しかし、このように実装しても、日本語入力中にキーワードの候補が表示されてしまいます。
上記のコードに何か問題はありますでしょうか。

日本語入力中にオートコンプリートを実行させず、確定後に初めて実行させる他の方法はありますでしょうか。
ご指導よろしくお願いします。

1 件の回答 1

2

問題が2つあります。

  1. $(this).autocomplete("search")で呼び出されたsearchにはkeyCodeが伝わっていないです(undefinedになっている)。
  2. 改行キーのみでsearchを呼び出しても結局search側のロジックでスペースキー以外は検索に行くことになっています。

searchkeyCodeを伝えるために、data()を使用します(方法は他にもあるかも)。
このように変更してください。

$('#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 ($(this).data("keyCode") != 13) return false;
            return true;
    },
    open: function() {
        $(this).removeClass("ui-corner-all");
    }
})
.keyup(function(event) {
    $(this).data("keyCode", event.keyCode).autocomplete("search");
});

しかしこの方法には問題があります。

このロジックではエンターキーが押された時に検索にいくようにしていますが、日本語を入力しているときはそれで良いとしても英語入力をしているときもエンターキーを押さないとサジェストしてくれなくなります。

キーアップイベントから半角・全角を判断して・・・等々、できなくはないと思いますが厳密にやろうとすると結構面倒です。
結局は全てのキー入力に対して検索するようになるのではないでしょうか・・・

1
  • ありがとうございます。 ご提供いただいたコードにしたところ、確かにエンターを押した時に動作しまして、data()を使うべきということを理解しました。 しかしおっしゃるように、英語で打っている時にエンターを押さないと動作しないのは、逆に不便になってしまいますね。 もう少し全体の動作をどうすべきか検討してみようと思います。
    – fivecafe
    Commented 2015年1月24日 6:40

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。