• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 164
  • Last Modified:

Jquery autocomplete

Hi Guys,

I have implemented autocomplete with jquery that return array:
Here is my code:
  $(function () {
                $("#Search").autocomplete({
                    source: function (request, response) {
                        $.ajax({
                            url: "/Categorymanager/Autocomplete",
                            type: "POST",
                            dataType: "json",
                            data: { Prefix: request.term },
                            success: function (data) {
                                response($.map(data, function (item) {
                                    return {
                                        label:  item.Deptname,   item.Categoryname,
                                        Value: item.Value
                                    };
                                }))
                            }
                        })
                    },
                    minChars: 2,
                    minLength: 2,
                    autoFill: true,
                    select: function (event, ui) {
                        $("#Search").val(ui.item.Value);
                        return false;
                    },
                    messages: {
                        noResults: "", results: ""
                    }
                });
            });
        });

Open in new window


Now I would like to customize my return fields for example:
" label:  item.Deptname, item.Categoryname,
I would like to make this "item.deptname" field in red color and bold.

How can I design my return ?
0
Moti Mashiah
Asked:
Moti Mashiah
  • 6
  • 2
  • 2
1 Solution
 
MontoyaProcess Improvement MgrCommented:
where are you sending your results?

Typically that is returning an array, and you're going to iterate through the array and do something with it... like send to a div, or a <p> tag, or whatever.
Once you have 'sent' your data somewhere, then assign a property (css) to that target...

like the <p> tag, or a specific class.
0
 
Moti MashiahAuthor Commented:
That is exactly what I don't understand what to do. :) as you can see I'm returning array to view for autocomplete and i can't figure how to design this automplete return.

can you give an example to how to do it .

Thanks,
0
 
Moti MashiahAuthor Commented:
Basically my question is - how I design this line in my code:

label: "Dept" + " " +  item.Deptname + " | " + "Catg" + " " + item.Categoryname,

Please, look at the code I posted in the beginning question.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
MontoyaProcess Improvement MgrCommented:
Here's a great tutorial: http://www.jquerybyexample.net/2012/05/how-to-read-and-parse-json-using-jquery.html

im driving so can't check out your code right now. (sorry)
0
 
Moti MashiahAuthor Commented:
ok, thank you for the link, but I don't see it helpful for now.

drive safe.
0
 
Moussa MokhtariEnterpreneurCommented:
You can use _renderitem
the styling is up to u
 $(function () {
                $("#Search").autocomplete({
                    source: function (request, response) {
                        $.ajax({
                            url: "/Categorymanager/Autocomplete",
                            type: "POST",
                            dataType: "json",
                            data: { Prefix: request.term },
                            success: function (data) {
                                response($.map(data, function (item) {
                                    return {
                                        label:  item.Deptname,   
                                        category: item.Categoryname,
                                        value: item.Value
                                    };
                                }))
                            }
                        })
                    },
                    minChars: 2,
                    minLength: 2,
                    autoFill: true,
                    select: function (event, ui) {
                        $("#Search").val(ui.item.Value);
                        return false;
                    },
                    messages: {
                        noResults: "", results: ""
                    }
                }).data("ui-autocomplete")._renderItem = function (ul, item) { 
                 return $( "<li></li>" )
				.data( "item.autocomplete", item )
				.append( "<div><div style="color:red;">" + item.label + "</div> " + item.category + "</div>" )
				.appendTo( ul );
                };
            });

Open in new window


Cheers
0
 
Moti MashiahAuthor Commented:
Hi,

thank you for the answer, but something goes wrong in the syntex with this line:

.append( "<div><div style="color:red;">" + item.label + "</div> " + item.category + "</div>" )

can you help with that?
0
 
Moussa MokhtariEnterpreneurCommented:
I'm sorry replace " with ' like this  

.append( "<div><strong style='color:red;'>" + item.label + "</strong>  " + item.category + "</div>" )

Open in new window

0
 
Moti MashiahAuthor Commented:
OH that works perfectly, but I have just one more issue.
when you pass the label it passes both property together like + item.Deprname + item.Categoryname.

You show me how to pass first the item.label, then item.category so in this case it passes both property and then for item.category it passes undefine.
0
 
Moti MashiahAuthor Commented:
thx
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 6
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now