![](/img/trans.png)
[英]In jquery UI autocomplete feature add a buttons at the end of each item in the list
[英]How to add a fixed item in the jQuery's autocomplete list?
我有一個簡單的 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
您可以覆蓋自動完成的_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">
您可以使用“響應”事件。 有關更多信息,請參閱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"});
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.