Creating an auto-suggest field with jQuery

[eluser]Wayne Smallman[/eluser]
Hi guys!

Try as I might, I simply cannot get CodeIgniter to play nice with jQuery.

Here's what I want to do...

1. I have a form with a field, that when typed into, the user sees a selection of suggested tags based on what they're typing.

2. I have a table that contains all of my tags, each with a user ID associated with them, which I can easily use as a filter.

3. I need to pass whatever the user is typing into the form field to a controller which will then perform the requisite query and return the aforementioned suggested tags.

Now, I have to admit that I am not even remotely familiar with how jQuery works, but I've been able to hack much more complex jQuery devices together in the past.

I first tried TextboxList, but that relies on MooTools, which kills everything I have in place that's presently using jQuery, and I simply have no idea how to resolve that kind of problem.

And then I tried the jQuery Tag Suggestion, but that only forced me towards the same problem that I would have faced had I enjoyed more luck with TextboxList; sending data to a controller.

The author of the latter example provides some code which illustrates how to jQuery code refers to the same file to fulfil the request. But I just don't have a clue how to make that work within a controller.

In addition to which, I'd need to take the variable passed from jQuery and use it in a query to MySQL.

I've tried other examples provided in a previous thread, but the links are broken and the one example I've found is also far too complex, in so far as disentangling their jQuery example and re-working it for my own purposes.

All in all, this really is vastly too complicated for me. But if I can get it working once, I'll probably be able to re-work it for more complex purposes later on.

Any advice or simpler examples would be much appreciated!

[eluser]Wayne Smallman[/eluser]
Anyone brave enough to take this one on? :-)

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

[eluser]Wayne Smallman[/eluser]
Hi Mike and thanks for the reply!

I have all of the code in place, but it's not working.

I've checked the URLs for both the JavaScript reference and the controller / function I'm accessing, and they're fine.

I've checked the query and that's working fine, too.

I tried swapping out the name of the field in question (called "tag") and changing it to "search", but that didn't make any difference.

Incidentally — and this is one of the things I really don't get about jQuery / JavaScript — how does the script know which field is passing data?

As it stands, the script is looking for a value called "queryString", but how is that in any way related to what's being typed into a field called "search", when that field isn't specified in the script?

My field is called "tag", so anything you can recommend to make that work would be excellent!

And thanks for your time so far...

[eluser]Mike DeFelice[/eluser]
Ahh it seems the forum is just removing the part of the code.

After maxlength="30" add

onkeyup="lookup(this.value);"

Hi Wayne, sorry about that some of the code got removed on my end

Code:

<form action="<?php echo base_url() . 'search/'; ?>" method="post">
                            <input type="text" name="search" maxlength="30">
                            <input type="submit" value=""/>
                        </form>

The onkey="lookup(this.value);" will grab the search box value and pass it to the function.

the neat thing about jQuery is that you can grab the value of the current field being called. For instance not a great example, but say I made a jQuery function so when I clicked on this link it would show an alert message with the rel="Wayne" value.

Code:

<a href="" class="clickme" rel="Wayne"></a>

then when you click your jQuery can use $(this).attr("rel") would get the value "Wayne", useless example but hope it does the job

[eluser]Wayne Smallman[/eluser]
Ah, right. I see the list appearing now.

Also, I see two things missing.

Firstly, what would the code be for list items, to place to list item text into the "tag" field?

Secondly, the suggestion would need to delimit when the text is added to the list and a comma is added, so that the suggestion process would begin again once the user starts to type another tag.

I really do appreciate your time, Mike.

Thanks to you, I have something working, which is much more than can be said for the other examples I've tried.

[eluser]aidehua[/eluser]
Hi Wayne,

I've done this in the past using this as my starting-point:

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

I can post the code I used later if you need it, but the sample code on the jQueryUI site will probably give you all you need to get started.

[eluser]Wayne Smallman[/eluser]
[quote author="aidehua" date="1295452682"]Hi Wayne,

I've done this in the past using this as my starting-point:

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

I can post the code I used later if you need it, but the sample code on the jQueryUI site will probably give you all you need to get started.[/quote]
Hi and thanks for the assist!

As I said previously, I know almost nothing about jQuery, so it's unlikely I'd be able to re-work this example, since the values in the example you provided are being placed into a list outside of the field — I wouldn't know how to make those values pass along with the form data into the database.

If your code provides a solution to this, I'd be keen to see how that works.

Thanks again!

[eluser]Unknown[/eluser]
Hi Guys,
I just launched a new website but when I analyse it in proffessional site, find many errors on the code.
how to solve it?
http://www.igomorocco.com
please advice

Many Thanks

[eluser]Mike DeFelice[/eluser]
Sorry for the delayed response, you would need a way when you click on the list items that appear they add to the tag field. I think you would be able to do this in the actual list items with some additional JQuery.

Code:

<ul>
<li class="tagadd">Tag 1</li>
<li class="tagadd">Tag 2</li>
</ul>

Then in your Javascript add some JQuery such as (Didn't test it, I think it should work) then all you would need to do is add an id to your field with the tags (tagfield)

Code:

$(function() {
$('.tagadd').click(function()
{
  $("#tagfield").append($(this).text());
return false;
});

});