CODEWITHSUNDEEP
inputautocomplete
Nothing personal
Nothing personal

Reputation: 91

An autocomplete directly inside input field

I'd like to add an autocomplete system to my website, I searched for a while but I didn't find what i'm looking for, it's hard to explain.

I'd like a system that autocomplete the input directly inside itself. Google use a "general" autocomplete plus this one but it seems nobody else has worked on something like this !

Something simple, and logical ... And if doesn't exist, how is it possible to do something like this ?

Here's the google system:

google autocomplete inside input

Upvotes: 4

Views: 1929

Answers (2)

Edward Goodnow
Edward Goodnow

Reputation: 11

function inlineAutoComplete(auto_complete_input, json) {
var elem = auto_complete_input;
jQuery('[data-inline-autocomplete]').remove();
jQuery(elem).parent().append('<span data-inline-autocomplete="' + elem + '" class="inline-auto-complete" style="display:none"></span>');
jQuery(elem).keyup(function(ev, ui) {
    if(jQuery(this).val() != '')
        jQuery(this).parent().find('[data-inline-autocomplete]').show();

    if(ev.which == 13) {
        jQuery(this).val( jQuery(this).parent().find('[data-inline-autocomplete] em').text() );
        jQuery(this).parent().find('[data-inline-autocomplete]').hide();
        return;
    }

    var term = jQuery(this).val();

    var matcher = new RegExp("^" + term);

    jQuery.each(json, function(i, item) {
        if(matcher.test(item)) {
            jQuery('[data-inline-autocomplete="' + elem + '"]').show();
            jQuery('[data-inline-autocomplete="' + elem + '"]').html('<em class="d-block">' + item + '</em>');
            return;
        } else {
            jQuery(this).parent().find('[data-inline-autocomplete]').hide();
        }
    });
    jQuery('[data-inline-autocomplete="' + elem + '"]').click(function(ev) {
                ev.stopPropagation();
                jQuery(elem).val(jQuery(this).text());
                jQuery(this).hide();
    });

});

} inlineAutoComplete('#css_editor pre > span.text-bold:visible .css_rules .css_new_rule', all_css_rules);

select and enter keys will both populate the input field, should be extendable for ajax as well

Upvotes: 0

Aviran Cohen
Aviran Cohen

Reputation: 5691

The solution might be to put a div above the input box with a gray text, that shows you the difference between the first autocomplete option to the current text in the textbox.

On key pressed - any common autocomplete will generate a list of matching items. take the first one and set a selected style on him (by using .addClass()), take the difference between the textbox content to the first item content and put it on the gray div.

I've found an interesting extension that selecting the first option by default:

http://github.com/scottgonzalez/jquery-ui-extensions/blob/master/autocomplete/jquery.ui.autocomplete.selectFirst.js

$( el ).autocomplete({
      selectFirst: true
});

You can play with it and changed it to fit your needs. for example, you can add into 'jquery.ui.autocomplete.selectFirst.js' file this code:

if (menu.element.children().first().length == 1)
{
    $("#autocomplete").val(menu.element.children().first()[0].childNodes[0].childNodes[0].data);
}

and it will not only select, but actually insert it to the textbox (Note: I just gave your example for what you can do, this code by itself wont be enough).

Upvotes: 2

Related Questions