4

I'm attempting to use jQuery's autocomplete feature, and after reading several posts I still have two questions:

1) I've gotten autocomplete to work with the code posted at the bottom, however I need the array titled "data" to be filled from our database. I've been trying to use different methods to fill this via AJAX. I tried using $.get and $.ajax. What is the correct syntax to accomplish this?

2) This array will be big, I will have 60,000 plus values if I just fill the array once. I was wondering if it's possible to perform an AJAX request to fill the array every-time the user enters a new letter? Is this better to do, or just fill the array with all values at once? By better, which taxes the system less?

//This code works
<script type="text/javascript">
  $(document).ready(function(){
  var data = "Facebook Gowalla Foursquare".split(" ");
  $("#search_company").autocomplete(data);
  });
</script>


//display company live search
echo('<form id="form" method="post" action="competitor_unlink.php" onsubmit="return">');
echo('Company: <input id="search_company"/>');
echo('<br/>');
echo('<button type="submit" value="Submit">Submit</button>');
echo('</form>');
Improve this question

4 Answers 4

Reset to default
2

Look at this demo - it's what you want to do (get data using ajax):

http://jqueryui.com/demos/autocomplete/#remote

You can pull data in from a local and/or a remote source: Local is good for small data sets (like an address book with 50 entries), remote is necessary for big data sets, like a database with hundreds or millions of entries to select from.

Autocomplete can be customized to work with various data sources, by just specifying the source option. A data source can be:

an Array with local data a String, specifying a URL a Callback The local data can be a simple Array of Strings, or it contains Objects for each item in the array, with either a label or value property or both. The label property is displayed in the suggestion menu. The value will be inserted into the input element after the user selected something from the menu. If just one property is specified, it will be used for both, eg. if you provide only value-properties, the value will also be used as the label.

When a String is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data. It can be on the same host or on a different one (must provide JSONP). The request parameter "term" gets added to that URL. The data itself can be in the same format as the local data described above.

The third variation, the callback, provides the most flexibility, and can be used to connect any data source to Autocomplete. The callback gets two arguments:

1) A request object, with a single property called "term", which refers to the value currently in the text input. For example, when the user entered "new yo" in a city field, the Autocomplete term will equal "new yo".

2) A response callback, which expects a single argument to contain the data to suggest to the user. This data should be filtered based on the provided term, and can be in any of the formats described above for simple local data (String-Array or Object-Array with label/value/both properties). It's important when providing a custom source callback to handle errors during the request. You must always call the response callback even if you encounter an error. This ensures that the widget always has the correct state.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I tried following the instructions on the website, however I am still unable to get it to work. It looks like the php script I am trying to access via an AJAX get request isn't even being ran. However I've done plenty of AJAX get requests before this. Any ideas?
2

Here's an example of how to specify a URL that will return the results from the database as JSON using the jQuery UI autocomplete plugin.

$("#search_company").autocomplete({
    source: "/Search", // <-- URL of the page you want to do the processing server-side
    minLength: 4 // <-- don't try to run the search until the user enters at least 4 chars
});

Autocomplete will automatically append a querystring parameter named "term" to the URL so your search page will need to expect that. Not sure what server technology you're using but since I'm a .NET developer here's an example in ASP.NET MVC :)

public ActionResult Search(string term) {
    var results = db.Search(term); // <-- this is where you query your DB
    var jqItems = new List<jQueryUIAutoCompleteItem>();
    foreach (var item in results) {
        jqItems.Add(new jQueryUIAutoCompleteItem() {
            value = item.CompanyId.ToString(),
            id = item.CompanyId.ToString(),
            label = item.CompanyName
        });
    }
    return Json(jqItems.ToArray(), JsonRequestBehavior.AllowGet);
}

jQueryUIAutoCompleteItem is just a data container that represents the JSON format that the autocomplete plugin expects.

public class jQueryUIAutoCompleteItem {
    public string value { get; set; }
    public string label { get; set; }
    public string id { get; set; }
}
Improve this answer

Comments

1

You're correct that sending the whole 60,000-record list to the client's machine doesn't sound like the best solution. You'll notice that Google only shows you a handful of the most popular matches in its autocomplete, as to many other websites.

You could shorten the list by waiting for the user to type two or three letters instead of searching on the first one.

You could do page chunking in the list (it goes by various names). That is, only return the top 10 or 15 matches. The user can get more of the list by scrolling or by clicking on a "Show More Results" link. You have to write (or search for) all the javascript code for this, of course.

Improve this answer

1 Comment

so what would the best way to fill this array be? onkeyup call the javascript function outlined above? (obv change it from onready)
0

It might be a bit late to this post but for others that find it. I created a plugin for jquery and the jqueryui autocomplete control that works with Foursquare. You can read the post and download the plugin at Foursquare Autocomplete Plugin

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.