How to have jQueryUI autocomplete run after Japanese language is confirmed

I am studying jQuery/javascript.Thank you.
I would like to use the keyword digest function of Amazon.co.jp in the text box.
I looked it up and found out that

Implement the Amazon/Google Suggest feature in jQuery
http://d.hatena.ne.jp/tatsu-no-toshigo/20140428/1398667460

On this page, there was an explanation about what could be done using Jquery UI autocomplete, so
I'm trying to implement it with this in mind.

sample code
<body>
  <input type="text" name="Keyword" id="Keyword" value="placeholder="Amazon Search">

  <divid="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>

However, if you move it, it will be executed in the middle of typing Japanese.
For iOS (Safari in iOS8) etc., if you select the candidate word displayed during Japanese input,
The hiragana you are typing and the selected word will be mixed up, and the display will be unintended.

For example, if you type "Amazon" and select "Amazon" from the list of candidates displayed without being confirmed, it will be "Amazon".

So,

Use Japanese in the jQuery UI Autocomplete widget
http://shiba-sub.sakuraweb.com/?p=5415

On this page, there was a description about the process of not allowing the search to be performed while typing in Japanese, so I rewritten the code as follows.

<body>
  <input type="text" name="Keyword" id="Keyword" value="placeholder="Amazon Search">

  <divid="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>

However, even if implemented in this way, candidates for keywords will be displayed during Japanese input.
Is there anything wrong with the code above?

Is there any other way to not allow auto-completion to be performed while typing in Japanese, but only after it is confirmed?
Thank you for your guidance.

javascript jquery jquery-ui

2022-09-30 14:05

1 Answers

There are two issues.

Use data() to communicate keyCode to search (there may be other ways).
Please change it like this.

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

However, there is a problem with this method.

This logic allows you to search when the Enter key is pressed, but if you type in Japanese, you have to press the Enter key when you type in English.

Judging half-width and full-width from the key-up event...I don't think it's impossible, but it's quite troublesome if you try to do it strictly.
In the end, it will be searched for all keystrokes...

2022-09-30 14:05

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656