Creating an auto-suggest field with jQuery

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

I added the class to the unnumbered list and the extra code, but I didn't know where to put it. I tried different places and none of the ways I tried worked.

[eluser]Mike DeFelice[/eluser]
Darn, I'm not too sure what's wrong then.

[eluser]Wayne Smallman[/eluser]
A typo!

I found that there weren't enough closing parenthesis.

Also, when I include the function part, the whole thing stops, but when I add the code sans the function part, the code works, but not the append part.

So the present code looks like:

Code:

function lookup(inputString) {

    if(inputString.length < 3) {

        // Hide the suggestion box.
        $('#suggestions').hide();

    } else if(inputString.length >= 3) {

        $.post("http://macbookpro.local/development/theundercloud/tags/suggest", {

            queryString: ""+inputString+""

        }, function(data){

            if(data.length > 0) {

                $('#suggestions').show();
                $('#autoSuggestionsList').html(data);

                $('.tagadd').click(function() {

                    $("#tags").append($(this).text());

                    return false;

                });

            }

        });

    }

} // end function lookup

As I said, the new code doesn't stop the whole thing from working, but clicking a list item doesn't add the item to the field.

[eluser]Victor Michnowicz[/eluser]
I was going to look into getting into the screen casting game soon. I was going to do a tutorial on this very subject. If laziness does not get the best of me I'll post a link to what I produce here.

[eluser]Mike DeFelice[/eluser]
The function is separate and would need to go after the lookup function

Code:

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

});

[eluser]Wayne Smallman[/eluser]
Ah right. OK, I added that but it's still not working, in so far as clicking on a list item doesn't then complete the text partial in the field.

Mike, I do appreciate your time on this!

[eluser]Mike DeFelice[/eluser]
Sorry about that, that's why you should always check your code lol

Code:

$(document).ready(function() {
    $(function() {
        $(".tagadd").click(function()
        {
        var $clickText = $(this).text()
        $("#tags").val($("#tags").val() + $clickText);
            return false;
        });
    });
});

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

I've added the new code (with variable names changed) and it's still not working.

So the jQuery is:

Code:

function lookup(inputString) {

    if(inputString.length < 3) {

        // Hide the suggestion box.
        $('#suggestions').hide();

    } else if(inputString.length >= 3) {

        $.post("http://macbookpro.local/development/theundercloud/tags/suggest", {

            queryString: ""+inputString+""

        }, function(data){

            if(data.length > 0) {

                $('#suggestions').show();
                $('#autoSuggestionsList').html(data);

            }

        });

    }

} // end function lookup

$(document).ready(function() {

    $(function() {

        $(".tag-add").click(function() {

        var $clickText = $(this).text()

        $("#tags").val($("#tags").val() + $clickText);

            return false;

        });

    });

});

And for the view, I have:

Code:

<?php

            if (count($this->arrayAttr['results']['select_tags']['tags']) > 0):

?&gt;                <ul>
&lt;?php

                foreach ($this->arrayAttr['results']['select_tags']['tags'] as $keyword):

                    ?&gt;<li class="tag-add">&lt;?php echo urldecode($keyword['tag']); ?&gt;</li>&lt;?php

                endforeach;

?&gt;                </ul>
&lt;?php

            endif;

?&gt;

The view is showing the list appearing fine, but clicking just doesn't do anything, sadly.

[eluser]Mike DeFelice[/eluser]
The field that you are adding the tags to, does it have the id "tags" ? Besides that, everything looks correct.

I tested it and it seemed to work fine

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">&lt;html &gt;
    &lt;head&gt;
        &lt;title&gt;&lt;/title>
        &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
        [removed][removed]
    [removed]
$(document).ready(function() {
    $(function() {
        $(".tag").click(function()
        {
        var $clickText = $(this).text()
        $("#tags").val($("#tags").val() + $clickText);
            return false;
        });
    });
});
[removed]
            &lt;/head&gt;
    &lt;body&gt;
<ul>
<li class="tag">Test</li>
<li class="tag">Test2</li>
</ul>

&lt;input type="text" id="tags" /&gt;
&lt;/body&gt;&lt;/html>

[eluser]Wayne Smallman[/eluser]
Mike, here's the code the for field:

Code:

<dt><label for="tags">Tags &dagger;</label></dt>
<dd>&lt;input type="text" name="tags" value="melon,passion fruit,apricot" id="tags" size="50"&gt;&lt;/dd>

I just checked and double-checked and I can't see anything wrong.

I've given you all of the code I'm using.