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());
                });;`

Answer 1

建议使用以下代码：

dev2

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

您在自动完成中使用了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()); });回调。当焦点位于结果项上时触发。如果要在基本元素获得焦点时触发事件，请使用focus作为回调函数。

希望有帮助。

jQuery UI自动完成选择事件在Chrome 74中不起作用

1 个答案: