jquery ui autocomplete js error on keydown-Collection of common programming errors

11 years ago
admin
3 minutes

i’ve included the jquery ui automcomplete plugin into the following structure:



my javascript for this input field looks like:


 

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 = $('', {
                href: item.value,
                text:  item.label,
                "class" : "mySearchClass" 

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


            var $li = $('


', {style:"width:100%"});
              return $li.add(a).appendTo(ul);
        };
});
}
 



I'm loading that function on document ready. for some reason, if a start typing e.g. the first three letters of a item, i get a resultlist. as soon as i push the keydown push button on the keyword, i get the following error in the chrome (latest version) console:


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



i’m using version 1.7.1 of jQuery and Version 1.8.12 of jquery UI


On the demo page of jquery ui autocomplete the keydown works well.


Any ideas what’s going wrong with my constellation?


It doesn’t make a difference to use remote or local data.


Best regards, Ramo


    

  1. 

    I really can make your code working. So I tried to rewrote it in a more simplier way. The problem is render functions only accept strings, not html element. So I add a listener to render the list after its generation (fired on keydown() event).
    

    My thought is you are doing it the wrong way.
    

      

    • why adding another class on those items ? they have already one, so they can be styled.
      • 

    • why transforming them into a nodes ? just add a click() event on them
      • 

    

    Could you explain your functional goal ?
    

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


});

    

    2.