Question

I am trying to use the jQuery Autocomplete UI widget on a text box and I am having no luck getting the source to work. I have a database full of names that I want the autocomplete to work against, so I created a page called searchpreload.aspx and it looks for a variable in the url and queries the db based on the querystring vraiable.

When I type in the search box, I am using the keyup function so I can capture what the value is that needs to be sent over. Then I do my string gathering from the db:

 if (Request.QueryString["val"] != null)
        {
            curVal = Request.QueryString["val"].ToString();
            curVal = curVal.ToLower();
            if (Request.QueryString["Type"] != null)
                type = Request.QueryString["Type"].ToString();

            SwitchType(type,curVal);
        }

It queries the database correctly and then it takes the strings and puts them in a list and prints them out to the page:

private void PreLoadStrings(List<string> PreLoadValues, string curVal)
    {
        StringBuilder sb = new StringBuilder();
        if (PreLoadValues.Any())
        {
            foreach (string str in PreLoadValues)
            {
                if (!string.IsNullOrEmpty(str))
                {
                    if (str.ToLower().Contains(curVal))
                        sb.Append(str).Append("\n");
                }
            }
            Response.Write(sb.ToString());
        }
    }

This works fine, if I navigate to this page I get a listing of all of the data that I need, however I can not get it to show up in the autocomplete box. When I debug the code, the source of the autocomplete is calling this page correctly each time and getting the correct data, it just is not displaying anything. Am I doing something wrong?

JQuery Code:

<script type="text/javascript">
          $(document).ready(function () {
              $(".searchBox").focus();
              var checked = 'rbCNumber';
              $("input:radio").change(function (eventObject) {
                  checked = $(this).val();
              });
              $(".searchBox").keyup(function () {
                  var searchValue = $(".searchBox").val();
                  //alert("Searchpreload.aspx?val=" + searchValue + "&Type=" + checked);
                  $(".searchBox").autocomplete({
                      source:"Searchpreload.aspx?val=" + searchValue + "&Type=" + checked,
                      minLength: 2


                  });
              });

          });      
  </script>

Also, should I be doing this a different way to make it faster?

Answer 1

You arent displaying the results into anything – source will return a data item that you can then use to populate something else on the page. Look at autocomplete’s select and focus methods.

here is an example of how i have done it:

field.autocomplete({
                minLength: 1,
                source: "whatever",
                focus: function (event, ui) {
                    field.val(ui.item.Id);
                    return false;
                },
                search: function (event, ui) {
                    addBtn.hide();
                },
                select: function (event, ui) {
                    setup(ui);
                    return false;
                }
            })
            .data("autocomplete")._renderItem = function (ul, item) {
                return $("<li></li>")
                .data("item.autocomplete", item)
                .append("<a>" + item.Id+ ", " + item.Name + "</a>")
                .appendTo(ul);
            };

The .data part is the part you are missing. Once the data comes back from the autocomplete you arent doing anything with it.

The source does not need to include the term the user entered into the search box. Jquery will automatically append the term onto the query string for you. If you watch the request get generated in firebug, you will see the term query hanging off the end of the url.