按下第二个键后Jquery自动完成运行?

时间:2012-01-08 21:59:50

标签: javascript jquery jquery-ui jquery-ui-autocomplete

我想使用属性“kolonadi”对每个文本框进行自动完成工作

当我按下文本框中的某个键时,该页面会提醒我“keydown enterance”,但自动完成功能未运行。如果我再按一个键就能正常工作。

如何修改此代码?

这是我的动态输入:

<input name="ctl00$MainContent$qtxt_UNVAN" type="text" id="MainContent_qtxt_UNVAN" class="textEntry2 ui-autocomplete-input" kolonadi="UNVAN" style="width:200px;" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">

这是jquery自动完成:

$('.textEntry2').keydown(function () {
   alert("keydown enterance"); 
  var kolonadi_ = $(this).attr("kolonadi");

    $(this).autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '<%=ResolveUrl("~/AutoCom.asmx/GetValues") %>',
                data: "{ 'word': '" + request.term + "','KullaniciIndexInGlob':'<%=KullaniciIndexInGlob %>','BaslikId':'<% =BaslikId %>','columnName':'" + kolonadi_ + "'}",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    response($.map(data.d, function (item) {
                        return {
                            label: item.split('-')[0],
                            val: item.split('-')[1]
                        }
                    }))
                },
                error: function (response) {
                    alert(response.responseText);
                },
                failure: function (response) {
                    alert(response.responseText);
                }
            });
        },
        select: function (e, i) {
            $("#<%=hfCustomerId.ClientID %>").val(i.item.val);
        },
        minLength: 1
    });
});

2 个答案:

答案 0 :(得分:2)

编辑:以前的代码不起作用,需要迭代来自textEntry2类的所有输入。

您必须在$(document).ready函数中调用自动完成,而不是在每个keydown中调用。假设您要使用自动填充的所有输入都来自类textEntry2,您需要以下内容:

<script type="text/javascript">
$(document).ready(function(){
    $('input.textEntry2').each(function() {
        var kolonadi_ = $(this).attr("kolonadi");
        $(this).autocomplete(/* do all stuff here */);
    });
});
</script>

答案 1 :(得分:2)

  

我想使用textbox attr“kolonadi”自动编译每个文本框

然后你需要制作符合该属性的a jQuery selector

$('input[type="text"][kolonadi!=""]').each(function() {
    // ...
});
  

...当我按下文本框中的某个键时,页面提醒我“keydown enterance”但是autocomp没有运行。如果我再按一个键就会运行!

问题是the jQuery UI .autocomplete method不会像您认为的那样立即降低下拉列表。如果您调用一次,它会将输入字段永久转换为自动填充字段。

因此,您的代码所做的是检查按键,如果找到它,它会将文本字段转换为自动完成。然后第二次输入按键时,自动完成处理程序运行运行处理程序,然后再将其转换为自动完成

因此,只需在页面加载时直接调用.autocomplete,摆脱keydown处理程序,并将其调用完毕。您不需要自己的按键处理程序,因为.autocomplete方法将插入自己的按键处理程序。

这样的事情:

var textEntry2 = $('.textEntry2');
var kolonadi_ = textEntry2.attr("kolonadi");

textEntry2.autocomplete({
    source: function(request, response) {
        $.ajax({
            url: '<%=ResolveUrl("~/AutoCom.asmx/GetValues") %>',
            data: "{ 'word': '" + request.term + "','KullaniciIndexInGlob':'<%=KullaniciIndexInGlob %>','BaslikId':'<% =BaslikId %>','columnName':'" + kolonadi_ + "'}",
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            success: function(data) {
                response($.map(data.d, function(item) {
                    return {
                        label: item.split('-')[0],
                        val: item.split('-')[1]
                    }
                }))
            },
            error: function(response) {
                alert(response.responseText);
            },
            failure: function(response) {
                alert(response.responseText);
            }
        });
    },
    select: function(e, i) {
        $("#<%=hfCustomerId.ClientID %>").val(i.item.val);
    },
    minLength: 1
});