jquery ui autocomplete js error on keydown

Question

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

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

my javascript for this input field looks like:

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

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

You should show your data structure. This syntax is very heavy, you could use formatItem() instead. I'll show you an example if you provide a mock data. — vaugham
– vaugham, Commented Jan 19, 2012 at 16:27
I've added some static data to the above code. i get the same behavior. — ramo
– ramo, Commented Jan 19, 2012 at 17:09

vaugham · Accepted Answer · 2012-01-20 09:41:44Z

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


});

edited Jan 20, 2012 at 9:41

answered Jan 19, 2012 at 18:02

vaugham

1,8611 gold badge19 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

ramo Over a year ago

this doesn't seem to work for me. now i get the "default" behavior of the ui autocomplete plugin. there is no link for each entry in the resultset. if i click on an item, i just get the value into the "input field"

ramo Over a year ago

so what i try to achieve is the following: i'll type in a search word and get an autocompletion list. with my above code i can hover over each resultlistentry click on it and get redirected to another page. this should also be possible when interacting with the keyboard, and not with the mouse... so type in the word, get the result list, press the push button (arrow down) select an entry, hit return and get redirected to the proper page. i'm getting a remote jsonstring which assembly is: {'keytitle', '1234'}. so a listresult should be labeled with keytitle but link to a page with id 1234

ramo Over a year ago

Hi, thank you for your ado, but somehow this is not the same behaviour as in my code above. in my code each entry represented a link (<a...></a>) and clicking on it got me to the proper page. the jsonstring i've got is {'keytitle', '1234'}. in my code above: item.value is evaluated to '1234' and item.label to 'keytitle' . but how can i achieve to get the "item" variable now?

vaugham Over a year ago

check the parameter of the redirect() function. Otherwise, you can check the $(input).val() or add an attribute in the click() event

ramo Over a year ago

hm, i'm not getting it: here's a outline of the reponse data i get: {"label":"Tosca","value":"605243","thumb":""} . how can i invoke now label to get "Tosca", or value to get "60.." or thumb to get this value?

|

Collectives™ on Stack Overflow

jquery ui autocomplete js error on keydown

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related