Jquery UI自动完成选择事件在chrome 74中不起作用答案

【问题标题】：Jquery UI autocomplete select event not working in chrome 74Jquery UI自动完成选择事件在chrome 74中不起作用
【发布时间】：2019-09-28 09:52:09
【问题描述】：

我正在使用 Jquery UI 自动完成，在另一个下拉选择中，一个 ajax 获取 JSON 数据以在自动完成下拉（#styleid）中加载，但选项在 chrome 中不可选择。我的 chrome 版本是 74.0.3729.131。虽然此代码在 Firefox 中运行。

我的代码是：

       var items = obj.style_options ;
        $( "#styleid" ).autocomplete({
                minLength: 0,
                source: function( request, response ) {
                    var string = $( "#styleid" ).val().replace(/,\s*$/, "");
                    var removeItem = string.split(',');

                    if(removeItem.length>0){
                        for(var k=0;k<removeItem.length;k++){
                            var cmpVal = $.trim(removeItem[k]);
                            if(cmpVal!=''){
                            items = jQuery.grep(items, function(value) { 

                              return value != cmpVal; 
                            }); 
                            }
                        }

                        //items = items.filter( function( el ) {
                            //  return !removeItem.includes( el );
                            //} );
                    }
                    //console.log(items);
                  response( $.ui.autocomplete.filter(
                    items, extractLast( request.term ) ) );
                },
                select: function( event, ui ) {

                    console.log(ui.item.value);
                    var terms = split( this.value );
                    terms.pop();
                    terms.push( ui.item.value );
                    terms.push( "" );

                    this.value = terms.join( ", " );

                  ///


                  ////
                  return false;
                },
                focus: function() {
                    $(this).data("uiAutocomplete").search($(this).val());
                }
              }).focus(function(){            
                    // The following works only once.
                    // $(this).trigger('keydown.autocomplete');
                    // As suggested by digitalPBK, works multiple times
                    // $(this).data("autocomplete").search($(this).val());
                    // As noted by Jonny in his answer, with newer versions use uiAutocomplete
                    $(this).data("uiAutocomplete").search($(this).val());
                });;`

【问题讨论】：

你能分享示例工作示例吗？调试问题很容易。
另外，您是否在 Chrome 控制台中遇到任何错误，您使用的是什么版本的 jQuery/jQuery UI？
请提供一个最小、完整和可验证的示例：stackoverflow.com/help/mcve 包括所有外部库版本，例如您使用的是什么版本的 jQuery 和 jQuery UI。
@skobaljic 我正在使用 jquery-1.10.2.min 和 jQuery UI - v1.10.4。并且没有收到任何错误。
我发现错误，错误是由于选择事件后的焦点事件。但是为什么我不知道。

标签： jquery jquery-ui dropdown jquery-ui-autocomplete

【解决方案1】：

建议以下代码：

var items = obj.style_options;
$("#styleid").autocomplete({
  minLength: 0,
  source: function(request, response) {
    var string = $("#styleid").val().replace(/,\s*$/, "");
    var removeItem = string.split(',');

    if (removeItem.length > 0) {
      for (var k = 0; k < removeItem.length; k++) {
        var cmpVal = $.trim(removeItem[k]);
        if (cmpVal != '') {
          items = jQuery.grep(items, function(value) {

            return value != cmpVal;
          });
        }
      }
    }
    response($.ui.autocomplete.filter(items, extractLast(request.term)));
  },
  select: function(event, ui) {
    var terms = split(this.value);
    terms.pop();
    terms.push(ui.item.value);
    terms.push("");

    this.value = terms.join(", ");

    return false;
  },
  focus: function() {
    // prevent value inserted on focus
    return false;
  }
}).focus(function() {
  $(this).data("uiAutocomplete").search($(this).val());
});

请查看：http://api.jqueryui.com/autocomplete/#event-focus vs https://api.jquery.com/focus/

您在自动完成中使用了focus 回调。这在焦点位于结果项上时触发。如果要在基本元素获得焦点时触发事件，请使用.focus() 作为回调函数。

希望对您有所帮助。

【讨论】：