How do you limit number of search matches with Jquery UI autocomplete?
Im currently using the JQuery UI extension for its search autocomplete. However, I need to be able to limit the list of matches to 10. Furthermore, I also need to have a button on the bottom that will bring up the next 10 (hypothetical) matches. So far I have this as my code:
<script>
$(document).ready(function() {
var termTemplate = "<span class='ui-autocomplete-term'>%s</span>";
$('input#autocomplete').autocomplete({
source: ['johannesburg z', 'johannesburg x', 'johannesburg v','johannesburg b','johannesburg a','joh开发者_运维知识库annesburg q', 'johannesburg u', 'johannesburg y', 'johannesburg o', 'johannesburg p'],
minLength: 3,
open: function(e,ui) {
var
acData = $(this).data('autocomplete'),
styledTerm = termTemplate.replace('%s', acData.term);
acData
.menu
.element
.find('a')
.each(function() {
var me = $(this);
me.html( me.text().replace(acData.term, styledTerm) );
});
}
});
});
</script>
and the HTML
<body>
<input id="autocomplete" />
<input type="button" class="hello" />
</body
Iv already checked for similar solutions, but nothing seems to be working.
I would handle most of this server side.
For example, have your server limit results to 10, and then output this via JSON to the client.
With regards to a button that scrolls to the next list of results, you will need to implement something that emulates a form of pagination. The autocomplete dropdown should maintain an offset for results. Initially, the limit is obviously ten, and the offset is 0 (start of the results, depending how you ordered it on output). The button will need to request more results from the server when clicked, and ultimately pass in another GET variable (as well as term) that will represent the offset of results.
How you implement this is up to you, and I haven't done this before so I can't just give you example code, but jQuery UI provides enough framework for you to get this done and based on my methodology above, it shouldn't be too difficult.
Not Your Exact Answer But go for this
$( ".selector" ).autocomplete({ minLength: 5 });
From the Site
The minimum number of characters a user has to type before the Autocomplete activates. Zero is useful for local data with just a few items. Should be increased when there are a lot of items, where a single character would match a few thousand items.
http://jqueryui.com/demos/autocomplete/#option-minLength
加载中,请稍侯......
精彩评论