Solved

Jquery autocomplete

Posted on 2016-11-28
10
68 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:Montoya
ID: 41905123
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
ID: 41905124
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
ID: 41905128
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:Montoya
ID: 41905134
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
ID: 41905143
ok, thank you for the link, but I don't see it helpful for now.

drive safe.
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 9

Expert Comment

by:Moussa Mokhtari
ID: 41905171
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
ID: 41905773
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
ID: 41906053
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
ID: 41906351
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
ID: 41906661
thx
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

861 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

30 Experts available now in Live!

Get 1:1 Help Now