Solved

Jquery autocomplete

Posted on 2016-11-28
10
19 Views
Last Modified: 2016-11-29
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
Comment
Question by:Moti Mashiah
  • 6
  • 2
  • 2
10 Comments
 
LVL 19

Expert Comment

by:Iammontoya
Comment Utility
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
 
LVL 1

Author Comment

by:Moti Mashiah
Comment Utility
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
 
LVL 1

Author Comment

by:Moti Mashiah
Comment Utility
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
 
LVL 19

Expert Comment

by:Iammontoya
Comment Utility
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
 
LVL 1

Author Comment

by:Moti Mashiah
Comment Utility
ok, thank you for the link, but I don't see it helpful for now.

drive safe.
0
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 9

Expert Comment

by:Moussa Mokhtari
Comment Utility
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
 
LVL 1

Author Comment

by:Moti Mashiah
Comment Utility
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
 
LVL 9

Accepted Solution

by:
Moussa Mokhtari earned 500 total points
Comment Utility
I'm sorry replace " with ' like this  

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

Open in new window

0
 
LVL 1

Author Comment

by:Moti Mashiah
Comment Utility
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
 
LVL 1

Author Closing Comment

by:Moti Mashiah
Comment Utility
thx
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now