Не уверен, как использовать автозаполнение JQuery UI ... :( - PullRequest
Новая
       20

Не уверен, как использовать автозаполнение JQuery UI ... :(

0 голосов
/ 13 сентября 2010

это продолжение предыдущего вопроса автозаполнения JQueryUI, я задал .

На этот раз мои данные возвращаются ... но я понятия не имею как я определяю, какой html отображать и как динамически обновлять этот html с моими результатами.

Итак, вот мой 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);
                    });
            }
        }
    });
}

и это связано в моем представлении

Index.aspx

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

Теперь .. я не уверен, как я скажу ему использовать некоторые (пока не готовые) html / div / etc. ... и затем заполнить этот список <ul> (я предполагаю, что я расширил функцию обратного вызова, выше .. вместо вызова этого response(data) метода .. wtf это?)

Ответы [ 2 ]

4 голосов
/ 13 сентября 2010

Вот мой рабочий пример автозаполнения пользовательского интерфейса jQuery. Надеюсь, это поможет: 

    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
       }
      }
     });

Если вы сейчас этого не делаете, получите Firebug . Это бесценный инструмент для веб-разработки. Вы можете установить точку останова на этом JavaScript и посмотреть, что произойдет.

0 голосов
/ 07 апреля 2013

Этот код работал для меня: 

$( "#Textbox" ).autocomplete({
    minLength: 2,
    source: function( request, response ) {
            var term = request.term;
            if ( term in cache ) {
                response( cache[ term ] );
                return;
            }

            var currentProject=$("#project option:selected").text();
            $.ajax({
                    url:  "url",
                    data: {term : request.term, IssueType :'Test', Project : currentProject},
                    dataType: "json",     
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function(data) { return data; },
                    success: function (data) {
                        var results = $.map(data, function(item){
                            return { value: item.value, id: item.id }}); 
                            cache[request.term] = results; response(results); }
            });
    }
});
...