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

Jquery UI autocomplete not narrowing results...

I have a JQuery UI that's connecting to a WCF rest service to search customers. It's connecting and pulling down the data and mapping it correctly. The problem is that it's not narrowing the results as I type. No matter what I put in the textbox, it comes back with the same 3 results.

My guess is that there's something I'm implementing wrong and it's a simple "just add option ____" (hopefully) or that I need to go back and make a much more robust WCF service to feed the data (most likely but I really hope not).

Any thoughts?

JQuery Code:
$(document).ready(function () {
            $("#txtCensus").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "API/CensusSearch.svc/696/Search",
                        success: function (data) {
                            response($.map(data, function (item) {
                                return {
                                    label: item.FirstName + " " + item.LastName + "(SSN: " + item.SSN + ")",
                                    value: item.FirstName + " " + item.LastName + "(SSN: " + item.SSN + ")",
                                    desc: item.PID
                                }
                            }));
                        }
                    });
                },
                minLength: 2,
                select: function (event, ui) {
                    $("#lblPID").text(ui.item.desc);
                },
                open: function () {
                    $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
                },
                close: function () {
                    $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
                }
            });


        });

Open in new window


JSON returned from web service:
[
    {
        "FirstName": "Steve",
        "LastName": "Jobs",
        "PID": "123454325",
        "SSN": "1234"
    },
    {
        "FirstName": "Slappy",
        "LastName": "Kincade",
        "PID": "4542345",
        "SSN": "5432"
    },
    {
        "FirstName": "Carlos",
        "LastName": "Spicyweiner",
        "PID": "4374672",
        "SSN": "6789"
    }
]

Open in new window

0
fredstov
Asked:
fredstov
  • 3
1 Solution
 
RobOwner (Aidellio)Commented:
What is the "response" function you've used?

                            response($.map(data, function (item) {
                                return {
                                    label: item.FirstName + " " + item.LastName + "(SSN: " + item.SSN + ")",
                                    value: item.FirstName + " " + item.LastName + "(SSN: " + item.SSN + ")",
                                    desc: item.PID
                                }
                            }));

Open in new window

0
 
fredstovAuthor Commented:
That was something that was shown on the official jqueryui example page that lets you customize the display and data of the returned jquery.
0
 
fredstovAuthor Commented:
Was able to fix it on my own. Near as I can tell, if you're going to use Ajax as the source, then it needs a search routine that narrows it down on the server side. If you want jquery to handle the narrowing down then you need a static json set.

With a slight altering of the code, it works just fine now:
$(document).ready(function () {
            $("#txtCensus").attr("disabled", "disabled");
            var jsonCensus = {};

            $.ajax({
                url: "API/CensusSearch.svc/696/Search",
                dataType: "json",
                success: function (data) {
                    jsonCensus = $.map(data, function (item) {
                        return {
                            label: item.FirstName + " " + item.LastName + " (SSN: " + item.SSN + ")",
                            value: item.FirstName + " " + item.LastName + " (SSN: " + item.SSN + ")",
                            desc: item.PID
                        }
                    });

                    makeCensusSearch(jsonCensus);
                }
            });

        });

        function makeCensusSearch(jsonSource) {
            $("#txtCensus").removeAttr("disabled");
            $("#txtCensus").autocomplete({
                source: jsonSource,
                minLength: 2,
                select: function (event, ui) {
                    $("#lblPID").text(ui.item.desc);
                },
                open: function () {
                    $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
                },
                close: function () {
                    $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
                }
            });

        }

Open in new window

0
 
fredstovAuthor Commented:
No one replied and, after fiddling with it for a couple days I was able to figure it out. I have posted my solution to help others.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

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