Jquery UI autocomplete JSON data parse

Question

Hey all I am trying to have my Jquery UI Auto-complete to take in a json string and have me able to only search from the first "Name" in the json and then be able to access the "image" part as well (i am inserting an image next to the name when it populates).

The json would look like this:

var availableData = [
   {"Name": "bob barker", "image": "./images/bbarker.png"},
   {"Name": "Jill bill", "image": "./images/jBill.png"},
   {"Name": "John Doe", "image": "./images/jdoe.png"},
   etc etc....

and the auto-complete script:

 $( "#autocomplete" ).autocomplete({
 source: availableData,
 dataType: "json"
 })

But i need to change the jquery-ui-1.10.4.js file in order to be able to read the json since it normally took in an array.

Any help would be great!

An example would be here but i cant seem to get that example to work with my code?

update for irvin-dominin-aka-edward

_renderItem: function( ul, item ) {
    return $( "<li>" )
        .append( $( "<a>" ).text( item.label ) )
        .css({
              "background-image":"url('https://www.zzzzzz.com/photo?" + item.image + "')", 
              "background-repeat":"no-repeat",
              "background-position":"top left",
              "background-size":"30px 30px",
              "padding-left":"25px"
        })
        .appendTo( ul );
},

I am unable to get the "image" (using item.image) value.. I can get the "name" value just fine by doing item.label.

I have no idea what you are trying to achieve, but the array elements should have value and label properties. — Ram
– Ram, Commented Mar 21, 2014 at 17:36

StealthRT · Accepted Answer · 2014-03-21 18:08:57Z

1

If I understand correctly, you can use jQuery map to translate your starting item array or object to new array of items, than you can apply the input filter using grep.

The current filter is stored in the request, source function parameter.

Code:

$(function () {
    var availableData = [{
        "Name": "bob barker",
        "image": "./images/bbarker.png"
    }, {
        "Name": "Jill bill",
        "image": "./images/jBill.png"
    }, {
        "Name": "John Doe",
        "image": "./images/jdoe.png"
    }]

    $('#personsearch').autocomplete({
        source: function (request, response) {
            var re = $.ui.autocomplete.escapeRegex(request.term);
            var matcher = new RegExp("^" + re, "i");
            response($.grep(($.map(availableData, function (v, i) {

                return {
                    label: v.Name,
                    value: v.Name,
                    image: v.image
                };
            })), function (item) {
                return matcher.test(item.value);
            }))

        }
    });
});

Demo: http://jsfiddle.net/VZ9xF/

edited Mar 21, 2014 at 18:08

StealthRT

10.6k41 gold badges195 silver badges371 bronze badges

answered Mar 21, 2014 at 17:46

Irvin Dominin

31k9 gold badges83 silver badges114 bronze badges

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

2 Comments

StealthRT Over a year ago

Thats close but i need to be able to get the image data when it populates the name... check my OP for the code i am talking about.

StealthRT Over a year ago

I changed your code to reflect the needed data in order to retrieve it in the .js file. image: v.image

Collectives™ on Stack Overflow

Jquery UI autocomplete JSON data parse

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related