JQuery UI Автозаполнение JS Ошибка при Keydown - PullRequest
Новая
       1

JQuery UI Автозаполнение JS Ошибка при Keydown

1 голос
/ 19 января 2012

Я включил плагин автозаполнения jquery ui в следующую структуру: 

<li class="search">
                            <input type="text" class="searchfield" name="searchfield" value="Search for Products" />
                        </li>

мой javascript для этого поля ввода выглядит так: 

<script type="text/javascript"> 

function addSearchFieldFunctionality() {

var availableTags = [
                    "ActionScript",
                    "AppleScript",
                    "Asp",
                    "BASIC",
                    "C",
                    "C++",
                    "Clojure",
                    "COBOL",
                    "ColdFusion",
                    "Erlang",
                    "Fortran",
                    "Groovy",
                    "Haskell",
                    "Java",
                    "JavaScript",
                    "Lisp",
                    "Perl",
                    "PHP",
                    "Python",
                    "Ruby",
                    "Scala",
                    "Scheme"
                ];  
$('.searchfield').each(function () {
    $(this).autocomplete({
            source: availableTags,
            minLength: 1


        }).data("autocomplete")._renderItem = function(ul, item) {
            //console.log(item);
            var a = $('<a>', {
                href: item.value,
                text:  item.label,
                "class" : "mySearchClass" 

            });
            var b = $('<a>', {
                href: item.value,
                text: "Add", style: "float:right"});


            var $li = $('<li></li>', {style:"width:100%"});
              return $li.add(a).appendTo(ul);
        };
});
}
</script>

Я загружаю эту функциюна документ готов.по какой-то причине, если начать печатать, например, первые три буквы элемента, я получаю список результатов.как только я нажимаю кнопку «keydown» на ключевом слове, я получаю следующую ошибку в консоли chrome (последняя версия): 

Uncaught TypeError: Cannot read property 'top' of null
a.widget.activate                                        jquery-ui.min.js:12
a.widget.move                                            jquery-ui.min.js:12
a.widget.next                                            jquery-ui.min.js:12
a.widget._move                                           jquery-ui.min.js:12
a.widget._create.element.addClass.attr.attr.bind.bind.d  jquery-ui.min.js:12
f.event.dispatch                                         jquery-1.7.1.min.js:3
f.event.add.h.handle.i

Я использую версию 1.7.1 jQuery и версию 1.8.12 из jquery UI

На демонстрационной странице автозаполнения jquery ui клавиатура работает хорошо.

Есть идеи, что не так с моим созвездием?

Не имеет значения использовать удаленные или локальные данные.

С наилучшими пожеланиями, Рамо

1 Ответ

1 голос
/ 19 января 2012

Я действительно могу заставить ваш код работать.Поэтому я попытался переписать его более простым способом.Проблема заключается в том, что функции рендеринга принимают только строки, а не элементы html.Поэтому я добавляю слушателя для рендеринга списка после его генерации (запускается событие keydown ()).

Я думаю, что вы делаете это неправильно.

  • зачем добавлять еще один класс для этих предметов?у них уже есть один, поэтому их можно стилизовать.
  • зачем превращать их в узлы?просто добавьте к ним событие click ()

Не могли бы вы объяснить свою функциональную цель? 

// Your list of links
var redirectLinks = {'Ruby': '1234.com', 'Asp': '1235.com'};
function redirect(url) {
  // TODO implement window.location=url or whatever you like
  if(redirectLinks[url] != undefined) {
    alert('redirecting to '+url+' => '+redirectLinks[url]);
  }
}

$('.searchfield').each(function () {
  $(this).autocomplete(availableTags, { 
    minLength: 1,
    change: function(event, ui) {
      console.log('this change event doesnt seem to be fired');        
    },
    select: function(event, ui) {
      console.log('this select event doesnt seem to be fired');        
    }
  });
  // After the list construction
  $(this).keyup(function(e){      
    if (e.which == 13) { // typing enter validates the input => autocompletechange
      console.log('validating input '+$(this).val());    
      redirect($(this).val());
    }  
    var $list = $('.ac_results:first ul').find('li');
    $list.click(function() { // adding an event on suggestion => autocompleteselect
      console.log('clicking on suggestion '+$(this).text());    
      redirect($(this).text());
    });
  }); 


});
...