jQuery with ASP.NET - How to Create, Populate, and Show UL

Question

In an ASP.NET web app, I am trying to create and populate a UL based on user input. This is not a quick fill. User enters a couple of letters, clicks a button, and the server returns all records like the entry. If there is more than one match, an UL is created showing all of the matches.

I've tried to adapt this code from a plugin. I can step through it with the debugger and everything seems OK, but the UL is either not generated to the document or it is invisible.

Here is the simplified code:

function fillBusinessDropdown(ListOfBusinesses) {

 var results = document.createElement("div");
 var $results = $(results);
 $results.hide().addClass("ac_results").css("position", "absolute");

 if ($.browser.msie) {
    $results.append(document.createElement('iframe'));
 }

 results.appendChild(businessToDom(ListOfBusinesses));

 $results.css({
 width: 400 + "px",
 top: 100 + "px",
 left: 150 + "px"
 }).show();


function businessToDom(ListOfBusinesses) {

  var ul = document.createElement("ul");

  var iLen = ListOfBusinesses.length - 1

  for (var i = 0; i <= iLen; i++) {
    var row = ListOfBusinesses[i];
    if (!row) continue;
       var li = document.createElement("li");

    // add the business name

    li.innerHTML = row.Bu_name;

// add the business ID
li.selectValue = row.Bupk;
var extra = null;
if (row.length > 1) {
  extra = [];
  for (var j = 1; j < row.length; j++) {
    extra[extra.length] = row[j];
  }
}
li.extra = extra;
ul.appendChild(li);

$(li).hover(
 function() { $("li", ul).removeClass("ac_over");      
            $(this).addClass("ac_over"); active = $("li", ul).indexOf($(this).get(0)); },
   function() { $(this).removeClass("ac_over"); }
 ).click(function(e) { e.preventDefault(); e.stopPropagation();   selectItem(this) });
  }
  return ul;
}

I am stumped. Does any0oe have any ideas where I've gone wrong? Thanks Mike Thomas

Answer 1

Not sure what is wrong with that code but you are using a mixture of javascript and Jquery. I suggest use JQuery all the time instead. Use .appendTo() etc