jquery自动完成回调中文本框中的光标位置？答案

【问题标题】：Cursor position in textbox inside jquery autocomplete callback?jquery自动完成回调中文本框中的光标位置？
【发布时间】：2014-06-26 00:18:29
【问题描述】：

使用 css 类自动完成：-

$(cssClass).autocomplete({
    minLength: 0,
    focus: function() {
        return false;
    },
    select: function( event, ui ) {
        var cursorPos = $(this).prop('selectionStart');
        console.log(cursorPos);// showing the proper cursor value
        return false;
    },
    source: function( request, response ){
        var cursorPos = $(this).prop('selectionStart');
        console.log(cursorPos);// undefined ...?
    }
});

当我尝试使用 css 类使用 jquery 自动完成来获取光标位置时，在一个闭包中 select 我能够成功检索当前位置的值，但是当在 source 闭包中完成相同操作时，该值是undefined。

谁能解释一下这是为什么？以及如何获取价值？

【问题讨论】：

你不能期望 selectionStart 在源中，因为它只是定义自动完成的源并且用户还没有开始他的选择
@DurgeshChaudhary 最好的做法是什么？
我想不出任何可能需要源中 cursorPos 的场景。所以不能评论。

标签： javascript jquery closures

【解决方案1】：

要获取源内的光标位置，您可以尝试search event method。一旦您在输入/文本区域中键入/更改内容，就会调用此方法，然后只会调用 source 方法。所以，你可以做的是，有一个全局变量 cursorPos 并在 search 方法中，将赋值为 cursorPos = $(this).prop('selectionStart'); 在source方法中，可以得到全局变量cursorPos的值。

您的代码可以修改为，

var cursorPos; // global var

$(cssClass).autocomplete({
minLength: 0,
focus: function() {
    return false;
},
select: function( event, ui ) {
    var cursorPos = $(this).prop('selectionStart');
    console.log(cursorPos);
    return false;
},
source: function( request, response ){
    console.log(cursorPos); // refers the global var and returns the cursor pos
    // add your logic
},
search: function( event, ui ){
    cursorPos = $(this).prop('selectionStart');
}
});

通过这种方式，你可以在source方法中获取光标位置:)

【讨论】：