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

Question

我正在使用 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());
                });;`

标签： jqueryjquery-uidropdownjquery-ui-autocomplete

Answer 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()用作回调函数。

希望有帮助。