[jQuery] Add items to list, is this a proper approach?

[maubau]

I'm trying to create a list, to which you can:

1. add and remove items.
2. according to what's in this list, there should be dynamic content
loaded on to the page.

I've accomplished 1 with the code below. I'm not sure about how to
accomplish 2. If anyone could point me in the right direction (and
give comments on my approach on 1 - I'm new to jQuery) it would be
greatly appreciated


<script language="javascript">

var listItems = new Array();
var currentList = new String();

function listManager(task, id, name) {
        //$("#debug").append("<p> ##### List manager. ("+listItems.length+"
items) ##### <br>");

        if(task == "add") {
                refreshList(); // refresh the list
                listItems.push(name); // add to array first, new item to 
listItems
array
                //$("#debug").append("<p>Added item: "+name+". List has now:
"+listItems.length+" items.</p>");
                newItem = getHTMLitem(id, i, name); // the new item to add - 
make it
html
                currentList = oldList + newItem; // add the string to current 
list
        }

        if(task == "delete") {
                listItems.splice(id, 1); // delete from array
                //$("#debug").append('Delete nr: '+id+'<br>');
                refreshList(); // refresh the list
        }

        $("#list").html(currentList); // output the list
        //$("#debug").append("------> Done. ("+listItems.length+" items) </
p>");
}

function refreshList() {
        oldList = "";
        for(i=0; i<listItems.length; i++) { // iterate through existing
listItems to give them new nr
                listItem = getHTMLitem(id, i, name);
                oldList += listItem; // add items to list string
        }
        currentList = oldList;
}

function getHTMLitem(id, i, name) {
        return "<li><a href=\"#\" id=\""+id+"\" onClick=\"listManager
('delete', '"+i+"')\">"+name+"</a></li>"; // the string to add
}


$(function() {

        $("#input").keyup(function(event){
                $.get("test.php", { search: this.value },
                        function(data){
                                $("#suggest").html(data);
                        });
        });

});

</script>

<input name="input" id="input" type="text" autocomplete="off" />
<input type="submit" />

<br />
<div id="suggest"></div>

<h2>Added</h2>
<ul id="list"></ul>

<hr />
<div id="debug"></div>

<hr />

----

My test.php contains:

if($_GET['search']) {
        $result = $db->query("SELECT * FROM table WHERE name LIKE '%".$_GET
['search']."%'");
        if(DB::isError($result)) die($result->getMessage());

        echo "<ul>";
        while($row = $result->fetchRow(DB_FETCHMODE_ASSOC)) {
                echo "<li><a href=\"#\" onclick=\"listManager('add', '".$row
['id']."', '".$row['name']."');\">" . $row['name'] . "</a></li> \n";
        }
        echo "</ul>";
}