CODEWITHSUNDEEP
javascriptjqueryjquery-autocomplete
Momen Zalabany
Momen Zalabany

Reputation: 9007

Extending jquery autocomplete :select part of string from inside text input

HTML 

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

how can i select textfrom #searchable starting from end of value of hidden input till end of #searchable ?

Fixed thanks all

    $('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,
            });
        });

Upvotes: 0

Views: 1303

Answers (2)

Fabr&#237;cio Matt&#233;
Fabr&#237;cio Matt&#233;

Reputation: 70159

Try this out

(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

If x value always start matching at the first character of search's value, the searchvalue.indexOf(xtext) is redundant as it will always return 0 and can be safely removed.

References:

Note: As selectionStart and selectionEnd are part of HTML5, there's no IE < 9 support. If you're rolling out your own typeahead, I suggest feature testing these before applying the the autocomplete in the text input element if you plan to support old IE.

Upvotes: 2

ATOzTOA
ATOzTOA

Reputation: 35950

Here you go... tested in Firefox and Chrome...

This will highlight from the hidden value end to end of string:

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

This will highlight from start to hidden value:

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

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

Upvotes: 0

Related Questions