[jQuery] Add items to list, is this a proper approach?
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(" ##### List manager. ("+listItems.length+"
items) #####
");
if(task == "add") {
refreshList(); // refresh the list
listItems.push(name); // add to array first, new item to listItems
array
//$("#debug").append("
Added item: "+name+". List has now:
"+listItems.length+" items.
");
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+'
');
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>";
}