Solved

Jquery autocomplete

Posted on 2016-11-28
10
85 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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

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

DevOps Toolchain Recommendations

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

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Html fieldset fix its height and width 4 31
Binding a Grid in Javascript 5 43
Filktering Alphabetically 8 30
asp.net mvc 2 22
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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)
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…

860 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