Плагин автозаполнения jQueryUI не работает - PullRequest
Новая
       14

Плагин автозаполнения jQueryUI не работает

0 голосов
/ 29 марта 2011

Я хочу реализовать что-то вроде функции автозаполнения, например:

http://jqueryui.com/demos/autocomplete/

Однако я не могу этого сделать.Вот мой код: 

    <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="../Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.autocomplete.js" type="text/javascript"></script>
    <link href="../Styles/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
    <script src="../Scripts/JScript-1.5.1.js" type="text/javascript"></script>
    <script src="../Scripts/jQueryUI.js" type="text/javascript"></script>

<script type ="text/javascript">
 $(function () {
     var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
    ];
     $('[id$="tbSearch"]').autocomplete({
         source: availableTags
     });
 });


<asp:TextBox ID="tbSearch" runat="server"></asp:TextBox>

Ничего не отображается в раскрывающемся списке в моем текстовом поле: tbSearch.Что здесь не так?

Ответы [ 8 ]

1 голос
/ 29 марта 2011

Две проблемы:

  1. Ваш код приходит перед HTML-кодом, на который он хочет повлиять.
  2. Даже если вы исправите (1), у вас будетпроблема в том, что фактическое значение "id" на стороне клиента не будет значением, которое вы закодировали в свой тег ASP.Вы должны вызвать некоторую вещь ASP, чтобы получить значение на стороне клиента.

о, подождите: также это ".click", а не ".Click".

Это такжеочень хорошая идея использовать ключевое слово var, где вы объявляете / определяете переменную «data» в обработчике «success».

edit - обратите внимание, что в примере, к которомуВаш вопрос связан, код установки jQuery находится внутри обработчика "готов" jQuery.Это обеспечит исправление проблемы 1.Я не уверен, почему вы подключаете обработчик "click" к элементу "text box";если он генерирует тег <input type="text">, то вы все равно не получите никаких кликов (я не думаю) ( edit , это неправильно);даже если ты это сделал, это немного странно.

0 голосов
/ 30 марта 2011

Полностью функционирующий пример 

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
    <script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js">
    </script>
    <script type="text/javascript" charset="utf-8" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
    <script type="text/javascript" charset="utf-8">
      $(document).ready(function() {        
         var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
        ];
        $('#tbSearch').autocomplete(availableTags);
      });
    </script>
  </head>
  <body>
    <input type="text" id = "tbSearch" name="code">
  </body>
</html>
0 голосов
/ 29 марта 2011

Ваш asp:TextBox, хотя для идентификатора установлено значение "tbSearch", не будет точно таким же, когда он перейдет в ваш браузер. ASP.NET добавляет немного к вашему идентификатору, который помогает идентифицировать ваш сервер управления.

Попробуйте вместо этого: 

$('[id$="tbSearch"]').autocomplete({
    source : availableTags
});
0 голосов
/ 29 марта 2011

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

$("#<%= tbSearch.ClientID %>").autocomplete({
...

или 

$("input.autocomplete").autocomplete({
...

<asp:TextBox ID="tbSearch" runat="server" CssClass="autocomplete"/>

Надеюсь, это поможет.

0 голосов
/ 29 марта 2011

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

Если этоВ этом случае вам просто нужно прикрепить функцию автозаполнения к текстовому полю следующим образом: 

$(document).ready(function() {
    $("#tbSearch").autocomplete("AgentList.aspx/LoadData");
});

Плагин позаботится об AJAX-запросе - вам не нужно.

0 голосов
/ 29 марта 2011

В вашем ajax-запросе вы не публикуете никаких данных.

Если вы используете этот плагин http://docs.jquery.com/Plugins/autocomplete

, попробуйте использовать 

$("#tbSearch").autocomplete("AgentList.aspx/LoadData");

и вернуть массив вваш веб-сервис

0 голосов
/ 29 марта 2011

Как указал Кит, вы перезаписываете ответ, полученный от сервера: 

success: function (data) {                    
   data = msg.d.split(" ");             
   $('#<%= tbSearch.ClientID %>').autocomplete(data);                 
}

Возможно, вы пытаетесь сделать следующее: 

data = data.split(" ");

Когда выщелкните ваше текстовое поле, и событие Click () будет запущено, все, что вы делаете, - это предоставление данных для автозаполнения.Вы на самом деле не вызываете выпадающий список.Для этого вам нужно вызвать метод поиска.Также имейте в виду, что есть свойство minLength, которое может препятствовать открытию раскрывающегося списка: 

//Set the minLength to zero
$("#tbSearch").autocomplete("minLength", 0");
//Now invoke the search   
$("#tbSearch").autocomplete("search", "");
0 голосов
/ 29 марта 2011

Одна проблема, которую я вижу здесь, заключается в том, что вы ссылаетесь на идентификатор "tbSearch" следующим образом: 

$("#tbSearch").autocomplete(data);

Тем не менее, как только .NET Framework отобразит эту страницу, идентификатор клиента текстового поля будет сильно отличаться. Вместо этого вы можете использовать следующее, чтобы убедиться в правильности идентификатора, на который вы ссылаетесь в своем коде jQuery: 

$('#<%= tbSearch.ClientID %>').autocomplete(data);

Несколько вещей, которые вы можете сделать, чтобы отладить сразу же:

  1. Добавьте обработчик ошибок к вашему вызову jquery .ajax. 

        error: function (xmlHttpRequest, textStatus, errorThrown) {
        alert(errorThrown);
    }

  2. Установите точку останова в вашем веб-методе. Вы попали?

...