scottgonzalez / jquery-ui-extensions

extensions to jQuery UI

This repository is not actively maintained. It works with whatever version of jQuery UI is used in the demos. There are no tests and I don't use any of these in any of my code anywhere. Individual extensions may or may not work with newer version of jQuery UI.

At some point in 2013, I will update all of this code, add tests, support multiple versions of jQuery UI, create several more extensions and post these on the new plugins site.

If you're looking for the selectFirst extension for autocomplete, check the 1-8 branch. selectFirst has been removed from master because the option was rolled into newer versions of jQuery UI as the autoFocus option.

Support this project by donating on Gittip.

jquery-ui-extensions's Issues

Does not work with jQuery UI 1.10

Any updates to this to work with jQuery UI 1.10
I've tried
and failed

Something I'm missing and just can't figure it out.

making autocomplete match only from the beginning of the words

Is it possible to make autocomplete widget search in the way that it would match entries only from the beginning of the phrase or from the beginnning of any word in a phrase? For instance, if the list of entries is:

1. software engineering
2. computer networks
3. operating systems
4. databases
5. distributed systems
6. programming languages

and one types "s", autocomplete should show only 1), 3) and 5) ("software engineering", "operating systems" and "distributed systems"), but not all the 6 entries.

If it is not possible to get such autocomplete widget behaviour at the moment, I would like to propose it as an optional feature and open an issue.

[selectFirst] Deleted chars on quick input

Your extension selectFirst works great.

But we met an issue on AJAX autocomplete with a quick entry. Some chars are deleted during my entry. It appears only with this extension activated.

Hope it helps and you may have a solution

Autocomplete and HTML in 1.9.0

Hi.

This code can update for 1.9.0

return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( $( "<a></a>" ) this.options.html ? "html" : "text" )
.appendTo( ul );

new:

return $( "<li>" )
.append( $( "<a>" ) this.options.html ? "html" : "text" )
.appendTo( ul );

I think data() is not here necessary and if then must be change to "ui-autocomplete-item".

Why not use the autoFocus options?

I don't understand what makes this plugin better than the already existing auto-focus option clearly documented here:

http://api.jqueryui.com/autocomplete/#option-autoFocus

The minLength property stops the show

And Firebug has nothing to say either.

The drop down does not happen when the property minLength is being used.

With the following versions:

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.js"></script>
<script src="jquery.ui.autocomplete.html.js"></script>

matcher.test( item.label || item.value || item ) is wrong?

In my page it doesn't work with matcher.test( item.label || item.value || item ) only with if (matcher.test(item.label) || matcher.test(item.value) || matcher.test(item))

autocomplete.selectFirst needs an update for JUI 1.9

In JQueryUI 1.9, the plugin autocomplete.selectFirst wont work.
In order to work with the updated ui-menu widget, line 19 should be:

menu.focus( $.Event({ type: "mouseenter" }), menu.element.children().first() );

(animate has been replaced by focus)

Hope this helps anyone trying the dev versions of JUI with this plugin.

Extensions should prolly use widget patching

I mean, whenever you want to depend on the version of UI we added it in, these should probably serve as some good examples of patching a widget in-place.

combobox. accentfolding problem

Scott. and all you people.

I'm working with the ui-autocomplete, and it extension combobox.
I'm so proud of you, Its make me feel so little. like dust in the Universe.

And , the problem that I have, is I live in Chile, we're an Spanish speak contry, so we use a lot of accent.
and with this accent-fold extension, I have almost done my job, BUT, whene I implemet the combobox extension, the accent-dolfing extension cracks. Is not working ... That is because, the extension is asking if the source is an Array, but the combobox extension give as source a function...

I'm try out, to make it work, but is just fail after fail.

I have this, is incomplete, and not working, but is all I have..

if ($.isFunction(source)) { //ASK if is a function
    alert( "function >> "+source ); //alert to test
    // /* this.source = function( request, response ) {      */
    var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
    response( select.children( "option" ).map(function() {
        var text = $( this ).text();
        if ( this.value && ( !request.term 
                            || matcher.test(text) ) 
                            || matcher.test( autocomplete.accentFolding.fold( text ) ) // test accentfolding
            return {
                label: text.replace(
                    new RegExp(
                        "(?![^&;]+;)(?!<[^<>]*)(" +
                        $.ui.autocomplete.escapeRegex(request.term) +
                        ")(?![^<>]*>)(?![^&;]+;)", "gi"
                    ), "<strong>$1</strong>" ),
                value: text,
                option: this
            };
    }) );
}

and I just copy the other stuff, with no result,

I hope any of you, can give some time to fix this problem, I hope for the best

Ricardo Muñoz

accentFolding works only with standard array of strings

AccentFolding would be an excellent extension, but in many cases the source of the autocomplete is not just an array of strings, but array of objects.

E.g. in my project the source looks like this:

source: function (request, response) {
$.ajax({
url: "Home/SearchAutocomplete",
type: "POST",
dataType: "json",
data: {
featureClass: "P",
style: "full",
maxRows: 12,
name_startsWith: request.term
},
success: function (data) {
response($.map(data, function (item) {
return {
label: item.DisplayString,
value: item.TreeNode.NodeType + ":" + item.TreeNode.UniqueName,
icon: item.TreeNode.NodeType == "I" ? "./Content/svg/cat_bread_dark.svg" :
(item.TreeNode.NodeType == "R" ? "./Content/svg/cat_pasta_dark.svg" : null)
}
}) // map
); // response
} // success
}); // ajax
},

So, it's an object with 3 properties: label, value and icon. In this case the extension will not know - understandably - which property to use for accent folding and matching.

We should have a optional parameter to define the property to use.

illuminate letters when typing

Hi,

It would be nice, if the autocomplete plugin illuminate typed letters in the suggest box.

As in fcbkComplete jQuery plugin.

Thanks

Autocomplete (html option): autocomplete search takes into account html tags

http://dev.nemikor.com/jquery-ui-extensions/autocomplete/html.html

Unfortunatelly, autocomplete search with html option takes into account html markup, though it should ignore it. For instance if I press "<", autocomplete gives me all the entries with html markup. The same is for typing tag names.

error: item.eq is not a function

Hi,
great that you created this extension, though when I try to use it I got this JS error in jquery-ui file. (it's 2nd line of the activate function). I have no idea what might be causing this so if you could provide some advise..

Thanks

Documentation

or the total lack of it. In most projects that is a serious issue.