Question

我正在使用自动完成插件，并希望即使我没有点击它也会选择聚焦的项目，而只需单击“输入”字段外部。

$('#adress_input_box').tagsInput({
    'width':'500px',
    'removeWithBackspace': false,
    'defaultText': 'Strasse, Ort, PLZ oder Gemeinde eingeben',
    'placeholderColor': '#AAACAB',
    'onRemoveTag': function(event){ 

        //do stuff here
    },
    onAddTag: function(e){

        //do stuff here
    },
    interactive: true,
    autocomplete_url: '/includes/autocomplete.php',
    autocomplete:{
        close: function(event, ui){
            allowCreatingTag=false;
        },
        select: function(event, ui){
        //stuff             
        },
        source: function( request, response ) {
        $.ajax({
          url: "/includes/autocomplete.php",
          dataType: "json",
          type: "post",
          data: {
            "term": request.term
          },
          error: function(){

              allowCreatingTag = false;
          },
          success: function( data ) {
              allowCreatingTag=true;
            response( $.map( data, function( item ) {
              return {
                label: item.label,
                value: item.value,
                category: item.category,
              }
            }));
          }
        });
      },
      minLength: 2,

      autoFocus: true,
    }
});

我也使用“tagsinput”插件，从输入中获取。

这是自定义自动填充功能：

  $.widget( "custom.autocomplete", $.ui.autocomplete, {
        _renderMenu: function( ul, items ) {
          var that = this,
            currentCategory = "";
          $.each( items, function( index, item ) {
            if ( item.category != currentCategory ) {
              ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
              currentCategory = item.category;
            }
            that._renderItemData( ul, item );
          });
        }
      });

Answer 1

您可以添加focus自动填充事件。

focus: function(event, ui) {
    $(".adress_input_box li.result").removeClass("selected");
    $("#ui-active-menuitem")
        .closest("li")
        .addClass("selected");
},

jQuery自动完成在外部单击时首先选择

1 个答案: