

jQuery/javascriptを勉強中のものです。よろしくお願いします。  
テキストボックスでAmazon.co.jpのキーワードサジェスト機能を使いたいと思いまして  
調べたところ、

> jQueryでAmazon/Googleのsuggest機能を実装する  
>  <http://d.hatena.ne.jp/tatsu-no-toshigo/20140428/1398667460>

こちらのページでJquery UI のautocompleteを用いて出来る事が解説されておりましたので、  
こちらを参考に実装しようとしています。

[code]

    サンプルコード
    <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>
    
[/code]

しかし、これを動かすと、日本語を入力している途中で実行されてしまいます。  
iOS（iOS8のSafari）などでは、日本語入力中に表示された候補ワードを選択すると、  
入力中のひらがなと選択したワードが混ざってしまい、意図しない表示となってしまいます。

例えば 「あま」と入力し、確定しないまま、表示された候補リストから「Amazon」を選択すると、「あまzon」となってしまいます。

そこで、

> jQuery UI Autocompleteウィジェットでの日本語使用  
>  <http://shiba-sub.sakuraweb.com/?p=5415>

こちらのページで、 日本語入力中は検索を実行させない処理についての記載があったため、コードを以下のように書きなおしました。

[code]

    <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>
    
[/code]

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

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


CC BY-SA 3.0
2015-01-23T04:07:57.577
5126
2015-01-23T06:12:29.550
7702
question
javascript jquery jquery-ui
jQueryUIのautocompleteを日本語確定後に実行させる方法


問題が2つあります。

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

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

[code]

    $('#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");
    });
    
[/code]

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

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

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


CC BY-SA 3.0
2015-01-23T06:12:29.550
5135
2015-01-23T06:12:29.550
7214
5126
answer