0

I have used JQuery UI autocomplete to cut down on the list of parts I have to display in a drop down, I am also using json to pass the list of parts back but I am failing to see the results, I am sure this is to do with my limited understanding of JQuery's Map function.

I have the following json 

{"parts":[{"partNumber":"654356"},{"partNumber":"654348"},{"partNumber":"654355-6"},{"partNumber":"654355"},{"partNumber":"654357"},{"partNumber":"654357-6"},{"partNumber":"654348-6"}]}

which on JSONLint is validated correct

I have viewed the post and response utilising Firebug and seen them to be correct but my auto complete does not seem to display, the closest I have got it to doing so, was when I displayed the entire JSON string with each character having a new line.

here is my JS

$('.partsTextBox').autocomplete({
    minLength: 3,
    source: function(request, response) {
        $.ajax({
            url: './PartSearch.ashx',
            data: $('.partsTextBox').serialize(),
            datatype: 'JSON',
            type: 'POST',
            success: function(data) {
                response($.map(data, function(item) {
                    return { label: item.partNumber }
                }))
            }
        });
    },

    select: function(e) {
        ptb.value = e;
    }
});

Any help anyone can give would be much appreciated. Have edited to include help given by soderslatt

Improve this question
4
  • i can't see if you are using the callback, can you tell me? my eyes are a bit sore Commented Dec 21, 2011 at 7:43
  • sorry I'm not sure what you mean, if you mean am I using the data retrieved then I believe i am in the success function. Commented Dec 21, 2011 at 7:45
  • Does is show any error in Firebug console? Also does response function resolve properly? Commented Dec 21, 2011 at 8:00
  • no error , but an empty display at the moment, in that a box is diosplayed with no contents. Response appears to have completed and exited. Commented Dec 21, 2011 at 8:17

3 Answers 3

Reset to default
1

I'm not sure, but shouldn't parts.part be an array ?

http://jsfiddle.net/jfTVL/3/

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

4 Comments

I UPsdated your code there with a snippet of my json like so $(function() { var parts= [{"partNumber":"654356"},{"partNumber":"654348"},{"partNumber":"654355-6"},{"partNumber":"654355"},{"partNumber":"654357"},{"partNumber":"654357-6"},{"partNumber":"654348-6"}]; $( "#tags" ).autocomplete({ source: function( request, response ) { response($.map(parts.part, function(item) { return { label: item.partNumber} })) } }); }); still no output :(
in my first jsfiddle I changed it to an array, new jsfiddle with your new structure as mentioned above,jsfiddle.net/jfTVL/6
I see that your jsfiddle works and I cannot see what I am doing with the returned data from my ajax query that is different to your response? I am seeing the structure come backand be passed into the response function but item still only contains a suingle character array really confused now as your example works fine?
wondering if the ajax part of my script is not passing the data into the map function correctly, wondering if the json is being parsed into a char array, this would explain why each line was just one character
1

From the jQuery autocomplete page:

The local data can be a simple Array of Strings, or it contains Objects for each item in the array, with either a label or value property or both. The label property is displayed in the suggestion menu. The value will be inserted into the input element after the user selected something from the menu. If just one property is specified, it will be used for both, eg. if you provide only value-properties, the value will also be used as the label.

Which means that if you use "value" instead of "partNumber", you should get want you want.

Improve this answer

Comments

0

jquery autocomplete plugin format out have to

{"query":"your_query","suggestions":["suggestions_1","suggestions_2"],"data":[your_data]}}

and use autocomplete that

$('#your_input').autocomplete({
    minChars: 2
    , serviceUrl: './PartSearch.ashx'
    , deferRequestBy: 50
    , noCache: true
    , params: { }
    , onSelect: function(value, data) {

    }
    , ajaxCallBack: function() {
            response($.map(data, function(item) {
                return { label: item.partNumber}
            }))
    }
});
Improve this answer

10 Comments

2 questions, are you saying that i need to change the format of my JSON? and i can't find the options you have provided within the documentation for autocomplete (I may have missed something here)?
hmm maybe other version of autocomplete, i use this devbridge.com/projects/autocomplete/jquery
that explains it I use JQuery UI autocomplete, I have updated origibnal question to specify this, and I am looking into the plugin you use.
see example jqueryui.com/demos/autocomplete/#remote, json format have to [ { "id": "Coccothraustes coccothraustes", "label": "Hawfinch", "value": "Hawfinch" }, { "id": "Accipiter gentilis", "label": "Northern Goshawk", "value": "Northern Goshawk" }, { "id": "Accipiter nisus", "label": "Eurasian Sparrow Hawk", "value": "Eurasian Sparrow Hawk" }, { "id": "Surnia ulula", "label": "Northern Hawk Owl", "value": "Northern Hawk Owl" } ]
I have updated my JSON format to the following [{"partNumber":"654356"},{"partNumber":"654348"},{"partNumber":"654355-6"},{"partNumber":"654355"},{"partNumber":"654357"},{"partNumber":"654357-6"},{"partNumber":"654348-6"}] but still only getting a single character per line output
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.