jquery ui autocomplete combobox widget example modified for ajax source

Question

Has anyone successfully modified the above mentioned widget for ajax source? I've been able to make the modifications and it works fine with the exception of the search term highlighting of the options. More specifically the below code.

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) ) )
                                return {
                                    label: text.replace(
                                        new RegExp(
                                            "(?![^&;]+;)(?!<[^<>]*)(" +
                                            $.ui.autocomplete.escapeRegex(request.term) +
                                            ")(?![^<>]*>)(?![^&;]+;)", "gi"
                                        ), "<strong>$1</strong>" ),
                                    value: text,
                                    option: this
                                };
                        }) );

Here's my modification to the widget:

(function ($) {
    $.widget("ui.Clients", {
        _create: function () {
            var self = this,
                select = this.element.hide(),
                selected = select.children(":selected"),
                value = selected.val() ? selected.text() : "";
            var input = this.input = $("<input>")
                .insertAfter(select)
                .val(value)
                .autocomplete({
                    delay: 0,
                    minLength: 0,
                    source: function (request, response) {
                        $.ajax({
                            url: "/Controller/Action", type: "POST", dataType: "json",
                            data: { searchText: request.term },
                            success: function (data) {
                                response($.map(data, function (item) {
                                    return {
                                        value: item.ClientName,
                                        id: item.ClientId
                                    }
                                }))
                            }
                        })
                    },

Can anyone assist with integrating that functionality into my ajax call?

Any luck on resolving this issue?

Nick Olsen
– Nick Olsen

2011-08-19 16:19:21 +00:00
Commented Aug 19, 2011 at 16:19 — Nick Olsen
– Nick Olsen, Commented Aug 19, 2011 at 16:19
Nevermind, I figured it out. See answer below.

Nick Olsen
– Nick Olsen

2011-08-19 17:08:19 +00:00
Commented Aug 19, 2011 at 17:08 — Nick Olsen
– Nick Olsen, Commented Aug 19, 2011 at 17:08

Nick Olsen · Accepted Answer · 2011-08-19 17:08:03Z

1

The widget expects there to be a label property in the return value from the response. The label property is what is displayed in the autocomplete window. If you don't specify a label property, it will just the value property. So, all you need to do is alter the original value for the label property and replace the text with item.ClientName

(function ($) {
    $.widget("ui.Clients", {
        _create: function () {
            var self = this,
                select = this.element.hide(),
                selected = select.children(":selected"),
                value = selected.val() ? selected.text() : "";
            var input = this.input = $("<input>")
                .insertAfter(select)
                .val(value)
                .autocomplete({
                    delay: 0,
                    minLength: 0,
                    source: function (request, response) {
                        $.ajax({
                            url: "/Controller/Action", type: "POST", dataType: "json",
                            data: { searchText: request.term },
                            success: function (data) {
                                response($.map(data, function (item) {
                                    return {
                                        value: item.ClientName,
                                        id: item.ClientId,
                                        label: item.ClientName.replace(
                                                new RegExp(
                                                    "(?![^&;]+;)(?!<[^<>]*)(" +
                                                    $.ui.autocomplete.escapeRegex(request.term) +
                                                    ")(?![^<>]*>)(?![^&;]+;)", "gi"
                                                ), "<strong>$1</strong>" ),
                                    }
                                }))
                            }
                        })
                    },

answered Aug 19, 2011 at 17:08

Nick Olsen

6,37912 gold badges57 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

LA_ Over a year ago

the code you gave above doesn't work fully for me - I see remote list of values, but I can not choose any - looks like select event should be also modified. Have you done it?

Nick Olsen Over a year ago

You shouldn't have to override the select method. It should just be using the default select from the framework. You see the values loaded into the element and the autocomplete works but you can't select anything?

LA_ Over a year ago

Right. Please see my question here - stackoverflow.com/questions/8011323/…

Aditya Manohar · Accepted Answer · 2011-04-27 14:52:29Z

0

The demo has a nice mix of options - Remote JSONP Datasource being one of them.

answered Apr 27, 2011 at 14:52

Aditya Manohar

2,2471 gold badge17 silver badges20 bronze badges

1 Comment

Cbs927 Over a year ago

Thanks for your reply. Unfortunately this does not pertain to my specific need.

Collectives™ on Stack Overflow

jquery ui autocomplete combobox widget example modified for ajax source

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related