Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

Below is a simple search example by Jquery:

<script>
$(function() {
    var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
    ];
    $( "#tags" ).autocomplete({
        source: availableTags
    });
});
</script>

<div class="demo">

<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>

</div><!-- End demo -->

<div class="demo-description">
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions     are tags for programming languages, give "ja" (for Java or JavaScript) a try.</p>
<p>The datasource is a simple JavaScript array, provided to the widget using the source-    option.</p>
</div><!-- End demo-description -->

There's basically a variable with the autocomplete content, and that's great and all, except I need something perhaps a little more complex. Instead of providing a list from a var/xml/sql I need to grab from an echo issued by a third party php script.

That php script will echo out the appropriate information depending on the query. i.e.: the user searches for customsearch.php?q=Lemons it will echo "Pineapples".

How can I achieve that? Can someone show me the way?

share|improve this question
    
please read the manual docs.jquery.com/UI/Autocomplete –  goat Dec 7 '11 at 19:42

1 Answer 1

up vote 2 down vote accepted

Based on your other question, I'd assume you're making an AJAX call to get the search results. Load them into an array and replace it in your example:

<script>
function GetSearchResults(){
    // make your ajax call here
    $.ajax({
      async: false,
      url: 'customsearch.php?q=Lemons',
      success: function(data) {
        var availableTags = [];
        // build an array from the response data here
        $( "#tags" ).autocomplete({
            source: availableTags
        });
      }
    });
}

$(function() {
    var availableTags = GetSearchResults();
});
</script>

<div class="demo">

<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>

</div><!-- End demo -->

<div class="demo-description">
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions     are tags for programming languages, give "ja" (for Java or JavaScript) a try.</p>
<p>The datasource is a simple JavaScript array, provided to the widget using the source-    option.</p>
</div><!-- End demo-description -->

Ideally you wouldn't set async to false, but I'm trying not to make your brain explode if you aren't familiar with callbacks.

share|improve this answer
    
You are already doing an asynchronous callback in the code... not to mention it would be simpler if you just made the whole thing inside ajax callback instead of using DOMReady callbacks at all. lol :) –  Esailija Dec 10 '11 at 11:45
    
actually Esalija, you're wrong. Sara, or any other developer may not want this to run until the DOM is ready as they may be constructing the passed data from info in the DOM. What you're suggesting is potentially unsafe. I wouldn't recommend it. –  John Williams Dec 15 '11 at 4:16

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.