Good jQuery Autocomplete that is not part of jQuery UI? - javascript

Is there a good alternative to jQuery UI autocomplete?
I couldn't find one on the internet. jQuery UI is far too big for just using the autocomplete, and I don't want to roll yet another autocomplete on my own.
Answer: jQuery UI custom build for just autocomplete is 23,052 bytes. SO uses the original Zaefferer version that was adapted into jQuery UI autocomplete. I guess if it's good enough for SO, it's good enough for me, forked it from agarzola on GitHub.

A Google search for 'jquery autocomplete' produced this DevBridge one (and all the others):
http://www.devbridge.com/projects/autocomplete/jquery/
This is also the most highly upvoted non-accepted answer in the possible duplicate of this question.

You can download a customized version of jQuery UI with just the components you need from http://jqueryui.com/download. Click Deselect all components then click the checkbox next to Autocomplete. The resulting minified js file is 20 KB uncompressed.

The jQuery official plugin :
http://docs.jquery.com/Plugins/autocomplete
Select2 jQuery plugin that turn select into autocomplete input+list :
http://ivaynberg.github.io/select2/
Chosen jQuery plugin, same thing but from a different author :
http://harvesthq.github.io/chosen/
Jörn Zaefferer jQuery plugin :
http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
Yahoo YUI :
http://developer.yahoo.com/yui/autocomplete/
Selectize.js (jQuery-based) :
https://selectize.github.io/selectize.js/
Twitter Typeahead :
https://twitter.github.io/typeahead.js/

See https://github.com/agarzola/jQueryAutocompletePlugin/blob/master/jquery.autocomplete.js

You can download a custom version of jQuery UI that only includes the autocomplete module:
http://jqueryui.com/download

3 year old question this but since it comes 2nd on Google results for "best jquery-ui autocomplete alternative" I believe it's worth placing a link here for twitter's Typeahead implementation: http://twitter.github.io/typeahead.js/
Slightly annoying that you might need the Hogan templating engine to make it work (adding a few more kb's to the load), but if you invest the time to read the docs it will be worth it.
I replaced my "location lookup" jquery UI implementation after 30 mins of perusing the docs with the (simplified) code structure below:
$('.location_text_field').typeahead({
name : 'locations',
remote : {
url : "/get_locations.php",
filter : function (response) {
return response.locations;
}
},
template : '<p>{{{label}}}</p>',
engine : Hogan
}).on({
// When the user selects a location do something clever
'typeahead:selected' : function (e, datum) {
// Doing something clever here....
},
// Reset the cleverness above if the user changed
// the text of the field manually on his own
'keyup' : function () {
// Reset cleverness
}
});
... and it works like a charm.

I was just looking for an alternative myself and found this
https://github.com/onigoetz/jquery.autocomplete
It uses jQuery, but not jQuery UI. It is size conscious, and it compatible with jQuery UI. Its "forked from agarzola/jQueryAutocompletePlugin" on github.
It may not have the backing of the well known jQuery UI implementation, but I tested it, and right now it seems to be everything advertised.

Related

Autocomplete Function with Databse, without JQuery Ui and JQuery Plugins

I am trying to find a way to program a simple autocomplete function with DB access, using JS, HTML5, CSS, Servlets and JQuery.
However, I can not use JQuery Ui (which is really bad since I do like the autocomplete function because of it's simplicity) or JQuery Plugins.
Datalist did not seem to do the job quite right on chrome (I had to select the element of the list and then click on it again after it has been selected, also it is not supported on Safari and iOS Safari).
Is there a simple way to build something like the JQuery Ui autocomplete function using only JQuery Ui and the rest of my tools? Thank you for your time and advice :)
You can use twitters typeahead plugin for simple autocompletion.

Fullcalendar 2.0.2 change cells background

I am currently searching a solution to change cells background in fullcalendar depends on availability or holidays for example.
I found several solutions:
- elhigu/fullcalendar on github (+)
- lcrodriguez/fullcalendar on github (+)
But they are for older versions of fullcalendar.
I also found this solution, :
https://stackoverflow.com/a/24375088/3641008
I would like to know if someone have another solution or plugin for 2.0.2 version.
I tried using the file found at the end here : https://code.google.com/p/fullcalendar/issues/detail?id=144.. but no success..
I am pretty new to librairy or plungin use.
Thanks for your help.
(+) Sorry I cannot post more than 2 links
EDIT
I finally got fullcalendar annotations (link) working with fullcalendar 1.6.4.
But I really need that fullcalendar2.0.2 (or higher) works.
This is what I did on mine:
I set the eventRender
eventRender: function (event, element, icon) {
if (isHoliday) {//do your own validation
element.find('.fc-event-title').append("<span class='ultra-light'> is a holiday</span>");
}
},
Of course once you find the element.find('.fc-event-title') you can append css or do whatever else you want to do it.

Autocomplete for mobile web apps

Is there a library (like Wink Toolkit, Sencha Touch or jQuery Mobile) that offers autocomplete solutions for web apps out of the box?
I need to apologize because I forgot to add its all about a mobile web app.
The question is excellent. I'm just currently dealing with the very same design problem. Current auto-complete solutions work very poorly on mobile devices (if at all).
Luckily there is jQuery Mobile for which you can get jQM Autocomplete as a plugin. See also accompanying design notes.
jQuery UI has autocomplete.
there are in fact several.
jQuery UI has auto complete.
http://jqueryui.com/demos/autocomplete/
Ajax ControlToolkit has autocomplete control (for c#)
http://www.asp.net/AJAX/AjaxControlToolkit/Samples/AutoComplete/AutoComplete.aspx
Mootools auto complete
http://jsfiddle.net/fabiomcosta/eZpuL/3/
Hope it helps.
Haven't used any autocomplete function for Sencha Touch myself but I know that there is a feature called "combobox" which has that functionality and Sencha Touch developers could use.
Implementing autocomplete on mobile makes you have into account that user is more prone to typing errors, and also has a changing connection.
I made an autocomplete with jQuery UI autocomplete but it performed poorly on mobile. Maybe you could have a different experience with it.
See https://stackoverflow.com/a/6545344/1197775
YUI3 AutoComplete helps me, this works good on my iphone
demo (( YUI2 )) :: http://developer.yahoo.com/yui/examples/autocomplete/ac_basic_xhr.html
tutorial (( YUI3 )) :: http://yuilibrary.com/yui/docs/autocomplete/
hope this helps n__n
jQuery UI library has a autocomplete widget. Check it here

JQueryUI Autocomplete collides with legacy code

My issue is. I have jQueryUI in version 1.8.5 and lot and a lot of legacy source code in a project. In legacy code it happens that there is 3ple times registred plugin autocomplete for jquery. However jQueryUI is registring the very same plugin. So when I type into my javascript:
$('#some_id').autocomplete();
It's not actually a jQueryUI.
Any chance to explicit choose UI?
I tried such approach:
jQuery.fn.myautocomplete = jQuery.ui.autocomplete
And then to use in my code:
$('#some_id').myautocomplete();
But this does not work. (Well it was a blind shoot so I did not expect to much.)
Any suggestion how to workaround the problem.
P.S.
Legacy code is blessed by the Pope and cannot be removed for next year or so.
You can:
download jquery.ui without autocomplete
change jquery.ui source
change old plugin source

Is possible to have more granular control over jQuery UI Dialog Widget's show/hide method?

Currently it seems that I can only use effects in their most basic form when using the Dialog widget. For example, the following will use the drop effect for both showing and hiding the dialog box:
$('#dialog').dialog({show:'drop', hide:'drop'});
However, the default for the drop method always drops to the left. What I really want is for it to drop to the right. Something like this:
$('#dialog').dialog({
show:{effect:'drop', direction:'right'},
hide:{effect:'drop', direction:'right'}
});
Is this possible?
I'm currently using 1.6rc6. I've also tried it 1.5.3 (stable) without any luck.
After digging into the source a bit, I don't think this is supported in both version 1.5.3 and 1.6rc*. It'll probably require a change to the API before the functionality above can be supported. Steerpike has found a version that probably should be in the mainline. If anyone knows otherwise, do correct me.
Actually, you can use any of the jQuery UI effects; e.g. pulsate:
$("#dialog").dialog({ show: "pulsate" });
There are plenty to be found here: http://docs.jquery.com/UI/Effects/
Note that there is a dependency on effects.core.js.
I tried passing an option (like you did) into 'show', it didn't work. I also tried to make 'show' a function, no luck avail.
What works however is:
$("a").click(function() {
$("#dialog").hide("drop", { direction: "right" }, 1000);
});
This is currently not Possible with 1.6 and 1.7.1.
You may find this link of dialog box examples useful. In particular the second one from the right. I'm not sure if it's using the standard dialogue plugin, but you should be able to figure it out from the examples they use.

Categories

Resources