Jquery自动完成 - 如何将click事件添加到列表中

时间:2012-05-03 12:33:21

标签: jquery

我正在使用以下代码填充我的自动填充列表。

    $('#input').autocomplete({ ajax_get : get_roles});

    function get_roles(v,cont,roleName){
            var roleName = roleName.value;
            roleName = roleName.toLowerCase();
            $.get('/da/roleautocomplete?roleName='+escape(roleName),{q:v},
                function(obj){
                  var res = [];
                  for(var i=0;i<obj.length;i++){
                    res.push({ id:i , value:obj[i]});
                  }
                  cont(res);
                },
                'json')
        }

我想在自动填充列表中单击或选择项目时触发事件。我试过这个 -

$('#input').autocomplete({
     select:function(event, ui){
          // do your things here
      }, etc.

但无济于事。有人可以帮我解决这个问题吗?

2 个答案:

答案 0 :(得分:2)

演示: http://jsfiddle.net/DMDHC/

有用阅读:http://jqueryui.com/demos/autocomplete/(您可以阅读有关可用的选项和活动等)。

<强>代码:

$( "#search" ).autocomplete({
    source: function( req, resp ) {
        $.post( "/echo/json/", {
            json: '["Rambo", "Foobar", "This", "That", "Batman", "Hulk"]',
            delay: 1
        }, function(data) {
            resp( data );
        }, "JSON" );
    },
    select: function(event, ui) {
        var TABKEY = 9;
        this.value = ui.item.value;

        if (event.keyCode == TABKEY) { 
            event.preventDefault();
            this.value = this.value + " ";
            $('#search').focus();
        }

        return false;
    }
});

答案 1 :(得分:2)

首次尝试使用select:function(event,ui){ ... }时遇到了类似的问题,但这绝对是可行的方法。

关键是使用ui.item来获取被点击或以其他方式选择的选项。我最初使用event然后使用this,但是点击次数与键选择次数不同(从某些角度看console.log),所以ui.item就是你的意思想。自动填充功能将设置为label: ..., value: ...,因此您最常使用的是ui.item.labelui.item.value