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

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

如果可以添加这个底部项目，那么我可以只滚动建议列表而没有底部项目吗？ IE：

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

Answer 1

您可以覆盖自动完成的_renderMenu方法。 例如：

/* 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"});
    }
});