Creating an auto-suggest field with jQuery

[eluser]Mike DeFelice[/eluser]
I think I can point you in the right direction, hopefully :-)

This would be inside of a .js file, it's set for 3 or more characters to return a result

Code:

function lookup(inputString) {
    if(inputString.length < 3) {
        // Hide the suggestion box.
        $('#suggestions').hide();
    } else if(inputString.length >= 3) {
        $.post("http://www.example.com/search/searching/", {
            queryString: ""+inputString+""
        }, function(data){
            if(data.length >0) {
                $('#suggestions').show();
                $('#autoSuggestionsList').html(data);
            }
        });
    }
} // lookup

This would call your controller (obviously use your models, views better then the example below), in this example you would have a search controller with a searching function.

Code:

public function searching() {
        //Set validation rules for the form input
        $this->form_validation->set_rules('queryString', 'queryString', 'required|trim|min_length[3]|xss_clean');

        // Validate all of the input, if it passes then show results
        if($this->form_validation->run() !== FALSE) {
YOUR QUERY
            $query = $this->db->get();

            if ($query->num_rows() > 0) {
                // While there are results loop through them
                echo '<ul>';
                foreach ($query->result() as $keyword) {
                    // Format the results, im using <li> for the list, you can change it.    

                    echo '<li>Your keyword link or what not</li>';
                }
                echo '</ul>';
            }
        }
    }

Now in your view just add

Code:

<div id="search">
                        &lt;form action="http://www.example.com/search/" method="post"&gt;
                            &lt;input type="text" name="search"&gt;  
                            &lt;input type="submit" value=""/&gt;
                        &lt;/form&gt;
                        <div class="suggestionsBox" id="suggestions" style="display: none;">  
                            <div class="suggestionList" id="autoSuggestionsList">
  
                            </div>
                        </div>
                      </div>

Now hopefully when you type in your search field some results will appear in the suggestionList.