1

I have the following code: http://jsfiddle.net/kheAn/

In JQuery Autocomplete, you can use slice to limit, but I am not sure how to do it with this plugin.

I want to limit the amount of elements that are shown in the autocomplete drop down.

Right now, all elements are being shown. I want to show just the top 10 that are closest to what the user typed.

How can I limit the elements shown?

Also, is there any better solution for this than the code I currently have? I have heard that I should be using Node.js and/or bootstrap.

4

1 回答 1

2

About NodeJS, it is a JavaScript server-side language, who is pretty and quite easy to get started with, but I don't think there is a special interest for an autocomplete feature ?!

I don't exactly know how tagit works, but if you want to use bootstrap to manage it, you can easily use the "typeahead" plugin and set the items option to the max number of items you wants.

http://twitter.github.io/bootstrap/javascript.html#typeahead

$('#demo2').typeahead({
    source: availableTags,
    items: 10
});

EDIT: according to the tagit.js documentation, and the jQuery autocomplete one.

https://github.com/aehlke/tag-it#autocomplete-object

Allows overriding the source and select options that are set by default, as well as adding any other options you want to pass to the jQuery UI Autocomplete widget, such as minLength or delay.

The autocomplete.source should be overridden if you want to use custom autocompletion sources, like an Ajax / XHR response.

http://api.jqueryui.com/autocomplete/

You cannot easily add an option to limit the max number of items displayed, however you could overwrite the source with a function where you can limit the response items inside !

I keep thinking that bootstrap is more adapted to your needs, and it doesn't require jQuery-UI.

EDIT:

After discussion, this plugin should probably be the one you are looking for !

http://welldonethings.com/tags/manager

$('#demo2').tagsManager({
    typeahead: true,
    typeaheadSource: availableTags
});
于 2013-05-05T19:29:20.050 回答