2

我正在使用 jQuery 自动完成脚本将字符串值传递给我的数据库，该数据库以 json 格式返回数据。通过查看萤火虫，我可以在自动完成中单击的项目是具有样式的列表项，以删除项目符号并使其更漂亮。

我的问题是我想触发一个单击事件来捕获我选择的列表项。

$("#group_name").autocomplete('@Url.Action("LookUpGroupName", "UserManager")',
                    {
                        dataType: 'json',
                        parse: function (data) {
                            var rows = new Array();
                            for (var i = 0; i < data.length; i++) {
                                rows[i] = {
                                    data: data[i],
                                    value: data[i].group,
                                    result: data[i].group
                                }
                            }
                            return rows;

                        },
                        formatItem: function (row, i, max) { // loop returns autocomplete items
                            return row.group;
                        },
                        width: 300,
                        multiple: false
                    });              // End of autocomplete

$(document).ready(function () {
        chkSelection();

        $(".ac_results li").click(function (event) {
            alert($(this).text());
        });
    });

这是从我的自动完成 javascript 生成的 html

<div style="display: block; position: absolute; width: 300px; top: 437.9px; left: 103.65px;" class="ac_results">
    <ul style="max-height: 180px; overflow: auto;">
        <li class="ac_even">118 Medi<strong>a</strong> ltd</li>
        <li class="ac_odd">2CV Rese<strong>a</strong>rch ltd</li>
        <li class="ac_even">7digit<strong>a</strong>l</li <li class="ac_odd">
        <strong>A</strong> br<strong>a</strong>nd<strong>a</strong>p<strong>a</strong>rt television ltd</li>
        <li class="ac_even"><strong>A</strong> Tout Fr<strong>a</strong>nce</li>
        <li class="ac_odd"><strong>A</strong>bb<strong>a</strong> Blinds</li>
        <li class="ac_even"><strong>A</strong>berdeen Journ<strong>a</strong>ls</li>
        <li class="ac_odd"><strong>a</strong>cc suspended <strong>A</strong>LF connect <strong>A</strong>lw<strong>a</strong>ys on Mess<strong>a</strong>ge</li>
        <li class="ac_even ac_over"><strong>A</strong>ccount suspended South West Medi<strong>a</strong> Group</li>
        <li class="ac_odd"><strong>A</strong>ctive Intern<strong>a</strong>tion<strong>a</strong>l</li>
    </ul>
    </div>

我不确定我的代码是否清楚我想在单击列表项时触发一个事件。

截屏

4

3 回答 3

5

在 jQuery 1.8 + 中使用事件委托

$(document).on('click','.ac_results li',function(){blaa,blaa,blaa});

当您添加处理程序时，这允许该项目不存在。

替换document为您的代码运行时肯定存在的最接近的父元素。

jQuery .on()

于 2012-12-13T19:50:42.793 回答
0

要扩展@Bluetoft 答案：如果您有多个事件，则可以像这样委托映射对象：

$('.ac_results').on({
  click : function(){alert($(this).text()}, 
  mouseleave : function(){ //etc...} 
}, 'li');

我通常更喜欢这种语法。

于 2012-12-13T19:54:54.500 回答
0

最好的决定是将属性 methodChain 放在小部件调用的末尾：

`<?php $this->widget('CAutoComplete', array(
        'model'=>$model,
        'name'=>'name',
        'url'=>array('url'),
        'minChars'=>2,
        'methodChain'=>".result(function() { someFunction(); })",
    )); ?>`

其中 comFunction() 是单击自动完成结果列表时调用的函数。

于 2017-03-10T08:57:16.190 回答