[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Jquery autocomplete

Posted on 2016-11-28
10
Medium Priority
?
147 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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
 
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 2000 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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
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 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…
Suggested Courses

656 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