Question

我有一个简单的jQuery代码来设置自动完成功能：

$(document).ready(function() {
  fInitApp();
});

function fInitApp(){
  $("#myList").autocomplete({
    minLength: 2,
    /*.....,*/
    dataType : "json"
  });
}

HTML

<input name="myList" id="myList">

我需要在列表的最底部添加一个分隔线，其中包含一个永久性菜单项，即：

[sugg    ]
   suggestion 1
   suggestion 2
   suggestion 3
   suggestion 4
   ------------
   my custom link

如果可以添加此底部项目，那么我可以只滚动建议列表而不显示底部项目吗？即：

[sugg    ]
        ^
   suggestion 1
   suggestion 2
   suggestion 3
   suggestion 4
        v
   ------------
   my custom link

Answer 1

您可以覆盖自动填充的_renderMenu方法。 E.g：

/* saves the current behavior of _renderMenu */
var render = $('#myList').autocomplete('instance')._renderMenu;

/* overrides the default method */
$('#myList').autocomplete('instance')._renderMenu = function(ul, items) {
  /* adds your fixed item */
  items.push({ label: 'my custom link', value: 'my custom link' });
  /* calls the default behavior again */
  render.call(this, ul, items);
};

我为你做了一个例子。开始输入'co'，您会看到COBOL和ColdFusion，但您会看到固定的最后一项ES 2015。如果您开始输入“jav”等，也会发生同样的情况。看看：

$(document).ready(function() {
  fInitApp();
});

function fInitApp() {
  $('#myList').autocomplete({
    minLength: 1,
    source: [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ],
    dataType: "json"
  });

  var render = $('#myList').autocomplete('instance')._renderMenu;

  $('#myList').autocomplete('instance')._renderMenu = function(ul, items) {
    items.push({
      label: 'ES 2015',
      value: 'ES 2015',
      last: true
    });

    render.call(this, ul, items);
  };

  var renderItem = $('#myList').autocomplete('instance')._renderItem;
  $('#myList').autocomplete('instance')._renderItem = function(ul, item) {    
    if (item.last) {
      setTimeout(function() {
        ul.find('li:last-child').css({
          position: 'fixed',
          top: ul.offset().top + (ul[0].scrollHeight === ul[0].clientHeight ? ul.offset().height : ul[0].clientHeight),
          left: ul[0].style.left,
          width: 'calc(145px - 1.4em)',
          border: '1px solid #CCC',
          borderTop: '2px solid #999',
          backgroundColor: '#FFEFFE'
        });
      }, 0);
    }

    return renderItem.call(this, ul, item);
  };
}

.ui-autocomplete {
  max-height: 125px;
  overflow-y: auto;
  overflow-x: hidden;
}

<link href="https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<input name="myList" id="myList">

Answer 2

您可以使用“响应”事件。有关更多信息，请参阅 https://api.jqueryui.com/autocomplete/#event-response

//add option in autosuggest list, that would be shown on every search even if search result is null.
$("#myList").autocomplete({
    response: function (event, ui) {
        ui.content.push({ label: "my custom link", value: "my custom link"});
    }
});

如何在jQuery的自动完成列表中添加固定项？

2 个答案: