扩展jquery自动完成:从文本输入中选择字符串的一部分

时间:2013-01-20 16:12:19

标签: javascript jquery jquery-autocomplete

HTML

<input type='text' id='searchable'value='hello world' />
<input type='hidden' id=x value='hel' />

如何从#searchable中选择文本从隐藏输入的值结尾开始直到#searchable结束?

修复所有

    $('input.complete').live('keyup.autocomplete', function(){
        var hi=$(this).val().toUpperCase();
        var was=this;//PROBlEM was here... was=$(this)
            $(this).autocomplete({
                source: function(request, response) {
                        $.ajax({ url: '<?=base_url()?>ajax/ac',
                        data: { 'term': this.term,'page': 'clinic','key': this.element.attr('data-complete')},
                        dataType: "json",
                        type: "POST",
                        success: function(data){
                            if(!data.length){
                                var result = [{label: 'No match found',value: response.term}];
                                response(result);
                            }else{
                                response(data);
                                $(was).val(data[0]['value']);
                                was.selectionStart=hi.length;
                                was.selectionEnd=data[0]['value'].length;
                            }
                        }
                    });
                },
                select: function(event, ui){},
                minLength: 2,
            });
        });

2 个答案:

答案 0 :(得分:2)

试试这个

(function() {
    var search = $('#searchable')[0],
        searchvalue = search.value,
        xtext = $('#x').val(),
        startAt = searchvalue.indexOf(xtext) + xtext.length;
    search.selectionStart = startAt;
    search.selectionEnd = searchvalue.length;
}());

Live demo

如果x值始终在搜索值的第一个字符处开始匹配,则searchvalue.indexOf(xtext)是多余的,因为它始终返回0并且可以安全删除。 / p>

参考文献:

注意:由于selectionStartselectionEnd是HTML5的一部分,因此没有IE&lt; 9支持。如果您正在推出自己的预先输入,我建议在应用文本输入元素中的自动完成功能之前进行功能测试,如果您打算支持旧的IE。

答案 1 :(得分:0)

您可以在Firefox和Chrome中测试...

这将从字符串的隐藏值端到端突出显示:

$("#searchable")[0].selectionStart = $("#x").val().length;
$("#searchable")[0].selectionEnd = $("#searchable").val().length;

这将从开始到隐藏值突出显示:

var s = $("#x").val();

$("#searchable")[0].selectionStart = 0;
$("#searchable")[0].selectionEnd = s.length;