views:

86

answers:

1

Hi folks,

this is a continuation from a previous JQueryUI Autocomplete question, I asked.

This time, I have my data returning ... but I have no idea how i define what html to show and how to dynamically update that html with my results.

So, here's my jquery ....

Home.js

function AutoComplete(element) {
    var cache = {};
    $(element).autocomplete({
        minLength: 2,
        source: function (request, response) {
            if (request.term in cache) {
                response(cache[request.term]);
                return;
            }
            else {
                $.getJSON("/api/autocomplete/" + 
                            encodeURIComponent(request.term),
                    function (data) {
                        cache[request.term] = data;
                        response(data);
                    });
            }
        }
    });
}

and this is wired up in my View

Index.aspx

<script type="text/javascript">
    $(document).ready(function () {
        AutoComplete("#searchQuestion");
    })
</script>

Now .. i'm not sure how i tell it to use some (yet to be made) html/div/etc. ... and then to populate that <ul> list (i'm assuming i extend the callback, above .. instead of calling this response(data) method .. wtf is that?)

A: 

Here's my working example of jQuery UI's autocomplete. Hope it helps:

    var cache = {};
    $("#textbox").autocomplete({
      source: function(request, response) {
       if (request.term in cache) {
        response($.map(cache[request.term].d, function(item) {
         return { value: item.value, id: item.id }
        }))
        return;
       }
       $.ajax({
        url: "/Services/AutoCompleteService.asmx/GetEmployees",  /* I use a web service */
        data: "{ 'term': '" + request.term + "' }",
        dataType: "json",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        dataFilter: function(data) { return data; },
        success: function(data) {
         cache[request.term] = data;
         response($.map(data.d, function(item) {
          return {
           value: item.value,
           id: item.id
          }
         }))
        },
        error: HandleAjaxError  // custom method
       });
      },
      minLength: 3,
      select: function(event, ui) {
       if (ui.item) {
        formatAutoComplete(ui.item);   // custom method
       }
      }
     });

If you're not doing so by now, get Firebug. It's an invaluable tool for web development. You can set a breakpoint on this JavaScript and see what happens.

Rafael Belliard
@Rafael Belliard : cheers for the answer. Yep, been using Firebug for eons. Now .. what's $.map(..) ??? does the autocomplete use some magic html it creates on the fly, hidden away from you and I .. but requires a value + id ? Also, what's the formatAutoComplete(..) method? what's that suppose to do?
Pure.Krome
@Pure.Krome: $map is just a fancy method for iterating through arrays: http://api.jquery.com/jQuery.map/
Rafael Belliard
@Pure.Krome: formatAutocomplete() is not necessary for a simple setup. I wired it up because while the autocomplete textbox shows the item.Value, I want another textbox to show the item.Key, so it only does a $("othertextbox").val(item.Id); The (if(ui.item)) is just to check the item is not null so it doesn't crash.
Rafael Belliard
@Pure.Krome: from what I just observed with Firebug, it indeed creates 'magic HTML', where each autocomplete element is formatted with <li class="ui-menu-item" role="menuitem"><a>Data shown</a></li>
Rafael Belliard
ok. gotcha. i had to do the following ... `function (data) { var results = $.map(data, function(item) { return { value: item.Question, id: item.UniqueQuestion } }); and this now works :) cache[request.term] = results; response(results); });`
Pure.Krome
@Pure.Krome: Glad it worked.
Rafael Belliard