为啥动态值没有填充在自动完成组合框中？

Posted 2023-05-08

【中文标题】为啥动态值没有填充在自动完成组合框中？

【英文标题】：why dynamic values not populating in autocomplete combo box?为什么动态值没有填充在自动完成组合框中？

【发布时间】：2019-03-09 03:24:22

【问题描述】：

我从 jquery 和 *** 问题中引用了许多示例。但是没有给出将数据库值添加到自动完成组合框中的示例。这就是我在这里提出这个问题的原因。

请告知为什么数组值没有填充到自动完成组合框中？这里是my sample coding

   (function($) 
$.widget( "custom.combobox", 
    _create: function() 
      this.wrapper = $( "<span>" )
        .addClass( "custom-combobox" )
        .insertAfter( this.element );

      this.element.hide();
      this._createAutocomplete();
      this._createShowAllButton();
    ,

    _createAutocomplete: function() 
      var selected = this.element.children( ":selected" ),
        value = selected.val() ? selected.text() : "";

      this.input = $( "<input>" )
        .appendTo( this.wrapper )
        .val( value )
        .attr( "title", "" )
        .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
        .autocomplete(
          delay: 0,
          minLength: 3,
          source: $.proxy( this, "_source" )
        )
        .tooltip(
          tooltipClass: "ui-state-highlight"
        );

      this._on( this.input, 
        autocompleteselect: function( event, ui ) 
          ui.item.option.selected = true;
          this._trigger( "select", event, 
            item: ui.item.option
          );
        ,

        autocompletechange: "_removeIfInvalid"
      );
    ,

    _createShowAllButton: function() 
      var input = this.input,
        wasOpen = false;

      $( "<a>" )
        .attr( "tabIndex", -1 )
        .attr( "title", "Show All Items" )
        .tooltip()
        .appendTo( this.wrapper )
        .button(
          icons: 
            primary: "ui-icon-triangle-1-s"
          ,
          text: false
        )
        .removeClass( "ui-corner-all" )
        .addClass( "custom-combobox-toggle ui-corner-right" )
        .mousedown(function() 
          wasOpen = input.autocomplete( "widget" ).is( ":visible" );
        )
        .click(function() 
          input.focus();

          // Close if already visible
          if ( wasOpen ) 
            return;
          

          // Pass empty string as value to search for, displaying all results
          input.autocomplete( "search", "" );
        );
    ,

    _source: function( request, response ) 

     var autocompleteList = [];
     autocompleteList=['test1','test2','test3','test4'];
     if(autocompleteList.length>0)
      console.log(autocompleteList) ;
       for(var j=0;j<autocompleteList.length;j++)

        return 
          label:autocompleteList[j],
          value:autocompleteList[j],
          option:this
       
      

     

    ,

    _removeIfInvalid: function( event, ui ) 

      // Selected an item, nothing to do
      if ( ui.item ) 
        return;
      

      // Search for a match (case-insensitive)
      var value = this.input.val(),
        valueLowerCase = value.toLowerCase(),
        valid = false;
      this.element.children( "option" ).each(function() 
        if ( $( this ).text().toLowerCase() === valueLowerCase ) 
          this.selected = valid = true;
          return false;
        
      );

      // Found a match, nothing to do
      if ( valid ) 
        return;
      

      // Remove invalid value
      this.input
        .val( "" )
        .attr( "title", value + " didn't match any item" )
        .tooltip( "open" );
      this.element.val( "" );
      this._delay(function() 
        this.input.tooltip( "close" ).attr( "title", "" );
      , 2500 );
      this.input.data( "ui-autocomplete" ).term = "";
    ,

    _destroy: function() 
      this.wrapper.remove();
      this.element.show();
    
  );
  )(jQuery);

  $(function() 
    $("#combobox").combobox(

    );

    //$("#combobox").closest(".ui-widget").find("input, button").prop("disabled", true);
);

html

 <div class="ui-widget">
  <select id="combobox">

</select>
</div>

【问题讨论】：

请提供预期结果数据的示例。 autocompleteList 会是什么样子？

【参考方案1】：

只改变组合框选择项；更改组合框选择项会自动更新自动完成

    $('#combobox').empty();
    for (var i = start_index; i < start_index + 4; i++) 
        $('#combobox').append(' <option value=test"' + i + '">test' + i + '</option>');
    

 $( function() 
   
   var autocompleteList = [];
     autocompleteList=['test1','test2','test3','test4'];
      
   for(var i=0; i<autocompleteList.length; i++)
     
             $('#combobox').append(' <option value="' + autocompleteList[i] + '">' + autocompleteList[i] + '</option>');

   
   
    $.widget( "custom.combobox", 
      _create: function() 
        this.wrapper = $( "<span>" )
          .addClass( "custom-combobox" )
          .insertAfter( this.element );
 
        this.element.hide();
        this._createAutocomplete();
        this._createShowAllButton();
      ,
 
      _createAutocomplete: function() 
        var selected = this.element.children( ":selected" ),
          value = selected.val() ? selected.text() : "";
 
        this.input = $( "<input>" )
          .appendTo( this.wrapper )
          .val( value )
          .attr( "title", "" )
          .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
          .autocomplete(
            delay: 0,
            minLength: 0,
            source: $.proxy( this, "_source" )
          )
          .tooltip(
            classes: 
              "ui-tooltip": "ui-state-highlight"
            
          );
 
        this._on( this.input, 
          autocompleteselect: function( event, ui ) 
            ui.item.option.selected = true;
            this._trigger( "select", event, 
              item: ui.item.option
            );
          ,
 
          autocompletechange: "_removeIfInvalid"
        );
      ,
 
      _createShowAllButton: function() 
        var input = this.input,
          wasOpen = false;
 
        $( "<a>" )
          .attr( "tabIndex", -1 )
          .attr( "title", "Show All Items" )
          .tooltip()
          .appendTo( this.wrapper )
          .button(
            icons: 
              primary: "ui-icon-triangle-1-s"
            ,
            text: false
          )
          .removeClass( "ui-corner-all" )
          .addClass( "custom-combobox-toggle ui-corner-right" )
          .on( "mousedown", function() 
            wasOpen = input.autocomplete( "widget" ).is( ":visible" );
          )
          .on( "click", function() 
            input.trigger( "focus" );
 
            // Close if already visible
            if ( wasOpen ) 
              return;
            
 
            // Pass empty string as value to search for, displaying all results
            input.autocomplete( "search", "" );
          );
      ,
 
      _source: function( request, response ) 
        var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
        response( this.element.children( "option" ).map(function() 
          var text = $( this ).text();
          if ( this.value && ( !request.term || matcher.test(text) ) )
            return 
              label: text,
              value: text,
              option: this
            ;
        ) );
      ,
 
      _removeIfInvalid: function( event, ui ) 
 
        // Selected an item, nothing to do
        if ( ui.item ) 
          return;
        
 
        // Search for a match (case-insensitive)
        var value = this.input.val(),
          valueLowerCase = value.toLowerCase(),
          valid = false;
        this.element.children( "option" ).each(function() 
          if ( $( this ).text().toLowerCase() === valueLowerCase ) 
            this.selected = valid = true;
            return false;
          
        );
 
        // Found a match, nothing to do
        if ( valid ) 
          return;
        
 
        // Remove invalid value
        this.input
          .val( "" )
          .attr( "title", value + " didn't match any item" )
          .tooltip( "open" );
        this.element.val( "" );
        this._delay(function() 
          this.input.tooltip( "close" ).attr( "title", "" );
        , 2500 );
        this.input.autocomplete( "instance" ).term = "";
      ,
 
      _destroy: function() 
        this.wrapper.remove();
        this.element.show();
      
    );
 
    $( "#combobox" ).combobox();
      $('.custom-combobox-input').val('');
   var start_index=5;
    $( "#btnUpdate" ).on( "click", function() 
      $('#combobox').empty();
    for (var i = start_index; i < start_index + 4; i++) 
        $('#combobox').append(' <option value=test"' + i + '">test' + i + '</option>');
    
      
      $('.custom-combobox-input').val('');
      start_index+=5;
    );
   );

.custom-combobox-toggle 
     padding: 13px!important;
    margin-top: -2px!important;


.wrapper 
margin:30px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css"><link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div class="wrapper">
<div class="ui-widget">
  <select id="combobox">

</select>
</div>
<br>
<input type="button" id="btnUpdate" class="btn btn-default" value="update" >
<div>

【讨论】：

谢谢！正在加载值，但缺少组合框选项，就像输入框一样。

它的工作方式类似于jqueryui.com/autocomplete/#combobox。你能解释一下“组合框选项”吗？它在写入内容时进行过滤，在单击箭头时显示所有值。你看codepen.io/peker-ercan/pen/LgxRjv

您的代码运行良好！但是我的代码下拉列表中的相同实现没有显示。虽然我在 html 中使用了 select 标签，但是在加载数据时下拉菜单没有显示。

可以添加code.jquery.com/ui/1.12.1/themes/base/jquery-ui.csscss文件吗

是的，虽然我收到错误“[显示/隐藏消息详细信息。] TypeError: Bootstrap tooltips require Popper.js (popper.js.org)”/jquery-3.3.1.min，但我已包含以下模块.js , /jquery-ui.min.js , /bootstrap.min.js ,/popper.min.js" type="module">

【参考方案2】：

我会建议如下：

$(function() 
  $("#combobox").combobox(
    source: function(req, resp) 
      var autocompleteList = [];
      var results = [];
      session.run('MATCH (n) RETURN n.name').then(function(result) 
        $.each(result.records, function(k, r) 
          autocompleteList.push(r._fields[0]);
        );
      );
      if (req.term.length) 
        results = $.ui.autocomplete.filter(autocompleteList, req.term);
       else 
        results = autocompleteList;
      
      resp(results);
    ,
    select: function(event, ui) 
      $('#log').text('selected ' + $("#combobox").val());
    
  );
);

这将覆盖source 回调并执行所需的活动以收集完整列表，如果用户输入了任何内容，则将列表减少为与输入内容匹配的那些项目。

由于这个组合框是自定义的，我认为没有selected 回调。自动完成使用select 回调。所以我会先尝试。否则，您可以在代码中创建 selected 回调。

否则，请在初始化 ComboBox 之前收集您的列表。希望对您有所帮助。

【讨论】：

我在初始化您的 ComboBox 之前正在收集我的列表，但列表仍然没有进入组合框。 jsfiddle.net/***/1sogae3d/23

@user2848031 你能提供一个数据示例吗？你是怎么收集的？

【参考方案3】：

这里是一个如何做的例子，我只是创建了一个数组来循环，因为我没有访问会话对象的权限。

var autocompleteList = [];

$(document).ready(function() 

	var records = ['test', 'test 2', 'test 3']

    records.forEach(function(record) 
      autocompleteList.push(record);
    );
    
    $( "#tags" ).autocomplete(
      source: autocompleteList
    );
    
);

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script type="text/javascript" src="//code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

【讨论】：

谢谢亚当。抱歉，我正在寻找带有组合框的自动完成功能 jqueryui.com/resources/demos/autocomplete/combobox.html

您需要覆盖 _source 函数并让它返回您的 autocompleteList 对象

添加所有库后，我得到一个错误 TypeError: $(...).combobox is not a function

这通常意味着 jQueryUi 包含有问题，请仔细检查这些引用。

这是我的代码：jsfiddle.net/***/1sogae3d/23 请让我知道这里缺少什么。