JQuery автозаполнение источника в виде URL-адреса, который принимает в строках запроса - PullRequest
Новая
       5

JQuery автозаполнение источника в виде URL-адреса, который принимает в строках запроса

1 голос
/ 23 мая 2011

Я пытаюсь использовать виджет пользовательского интерфейса jQuery Autocomplete в текстовом поле, и мне не везет заставить работать источник.У меня есть база данных, полная имен, с которой я хочу, чтобы автозаполнение работало, поэтому я создал страницу с именем searchpreload.aspx, которая ищет переменную в URL и запрашивает базу данных на основе переменной строки запроса.Когда я печатаю в поле поиска, я использую функцию keyup, чтобы я мог определить, какое значение нужно передать.Затем я выполняю сбор строк из базы данных: 

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

. Она правильно запрашивает базу данных, затем берет строки, помещает их в список и выводит их на страницу: 

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

Это работает нормально, если я перехожу на эту страницу, я получаю список всех необходимых мне данных, однако не могу отобразить их в окне автозаполнения.Когда я отлаживаю код, источник автозаполнения каждый раз правильно вызывает эту страницу и получает правильные данные, просто ничего не отображается.Я делаю что-то не так?

Код JQuery: 

<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>

Кроме того, я должен сделать это другим способом, чтобы сделать это быстрее?

1 Ответ

1 голос
/ 23 мая 2011

Вы не отображаете результаты во что-либо - источник вернет элемент данных, который вы затем сможете использовать, чтобы заполнить что-то еще на странице.Посмотрите на выбор автофокуса и методы фокусировки.

Вот пример того, как я это сделал: 

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

Часть .data - это та часть, которую вам не хватает.Как только данные возвращаются из автозаполнения, вы ничего не делаете с ним.

Источник не должен включать термин, введенный пользователем в поле поиска.Jquery автоматически добавит термин в строку запроса для вас.Если вы посмотрите на запрос, сгенерированный в firebug, вы увидите, что термин запроса висит за концом URL.

...