Question

我想在单独的div中显示建议的自动填充，而不是在指定的自动完成小部件上显示的弹出菜单。原因是：我们使用自动完成功能来帮助用户看到他们即将尝试重复输入。当他们在输入字段中输入时，div将显示渐进式匹配。

我正在使用带有远程数据源的自动完成示例代码“birds”进行测试：

<script>
  $(function() {
    function log( message ) {
      $( "<div/>" ).text( message ).prependTo( "#log" );
      $( "#log" ).scrollTop( 0 );
    }

  $( "#birds" ).autocomplete({
    source: "search",
    minLength: 2,
    select: function( event, ui ) {
      log( ui.item ?
        "Selected: " + ui.item.value + " aka " + ui.item.id :
        "Nothing selected, input was " + this.value );
      }
    });
  });
</script>

Answer 1

你的意思是这样的：

$(function() {
    function log( message ) {
      $( "<div/>" ).text( message ).prependTo( "#log" );
      $( "#log" ).scrollTop( 0 );
    }

  $( "#birds" ).autocomplete({
    source: "search",
    minLength: 2,
    select: function( event, ui ) {
      $('.newDiv ul').empty();
      },
     change: function(event, ui) {
        $('.newDiv ul').empty();
     }
    }).data('autocomplete')._renderItem = function(ul, item) {    
      return $('<li/>')
        .data('item.autocomplete', item)
        .append(item.value)
        .appendTo($('.newDiv ul'));
    };
  });

HTML：

<div class="newDiv"><ul></ul></div>

Answer 2

虽然自动填充功能中没有规定可以实现您的目标，但这里的技巧可能对您有用 - How to customize jquery autocomplete for displaying in a DIV

如何指定自定义元素以显示自动完成？

2 个答案: