pixabay / jquery-autocomplete Goto Github PK

Hi,

i was on my research for finding a good and light weight plugin for an auto-complete and it looks like this is good for my project i want to ask if it support a groupings and/or JSON format. Thank you.

I have two search boxes (with same class) in a page and assigning the autocomplete by class name.
The problem is when I drag the window and resize to larger view from mobile view the suggestions instances are having some problems.

Now I want to keep only a single instance of the suggestions for both of the input boxes. Can anybody help me?

for example

if the text ( welcome to my site "site.com" we are happy with you )
the auto complete will put in the box after select ( welcome to my site)
it's cut all text after first double quote ("site.com" we are happy with you)

I hope solve this issue ASAP

best regards
and thank you for this awesome script

if input contains special characters like parentheses then some exceptions occurs.
we can use solution from here:
http://stackoverflow.com/questions/3446170/escape-string-for-use-in-javascript-regex

When you destroy the autocomplete, it relies on data in that.sb and other properties which do not exist. Therefor, a lot of listeners are being left on the page and the autosuggest elements are not being removed.

Hello!

On your demo page you state that, when specifying the source function, its response callback must always be called, even in the event of an error.
In my case (and I believe this to be a regular use-case), my source function performs an AJAX request on some server. Servers may, sometimes, respond with an error (e.g. the server is overloaded), even if my query is correct.
However, since I have caching enabled, the plugin will cache the value I pass to the response callback - and remember than an unexpected error occurred, so I don't have a proper value to pass. This is troublesome: if I retype the previous query, it won't reattempt to fetch proper suggestions.

So, what value should I pass to the response function on the event of an error? From looking at the source code you cache whatever value is passed (even if not an array).
If you agree that this is indeed an issue, an easy way to fix it would be to check if the value passed is an array, and only then cache it. This would mean that, on the event of an error, I could call the response callback with no arguments and nothing would be cached.
Another suggestion would be to expect two callback functions in the source function, the second for dealing with errors (and one should always be called).

Anyway, thank you for the very useful plugin!

Hi there,
I am passing an array into choices as per your example with the countries and flags - just names and ids instead [['Sascha', 2], ['Klaus', 5]].

I use this to display, so names are displayed, ids are stored in data-id
return '

Which works great. BUT: how do I access the id value in data-id on form submission? It is not passed to the original targeted input element as far as I can see or is it?

The dropdown simply doesn't show up on my Nexus 5 (Android 6), neither in the demo website nor in my website.
Do you have any fix for mobile devices?

I use $.getJSON for get suggestions without cache.
When I select an item by mouse click everything is ok, but if I press a Enter on keyboard browser makes a second ajax-request. Adding a '13' code in list on this line fix this issue for me.

if (!~$.inArray(e.which, [13, 27, 38, 40, 37, 39])) {

We use At.js for autocompletion of (@) mentions. It's fantastic but it doesn't suit the use case I'm using jQuery-autoComplete for. I think the way it handles highlighting of suggestions is better.

An example

• The first item in the list is always auto-focused / highlighted. So if you press enter it'll just insert that. You can still press escape, etc. of course.
• It never updates the field's value until you press enter, etc. Even if you press down to move to another suggestion, it still doesn't change the value in the field.

This feels very nice and kind of faster than having to press down and then enter to pick the first item (given that #9 is merged).

These changes would be great or at least an option to enable this. Aside from how nice it feels to me, I guess it's important for us to have both autocompletes to feel the same.

A very nice, simple but yet flexible plugin!

I see the following behaviour on the demo page using Icedove on Debian stable.

Click on the "hero-demo" input field to make it active. Leave the pointer in the field or move it away to a position anywhere but below the field. Type "p". Then the drop-down list appears as expected. Now hit "tab". Then the drop-down list disappears, the selection moves to the link "MIT licence", the "p" stays in the input field and the onSelect event is not fired. This behavior seems fine.

Once more, click on the "hero-demo" input field to make it active. But this time place the pointer below the field so it will be inside the drop-down list when it opens. Type "p". The drop-down list appears as expected and the item below the pointer is highlighted. Now hit "tab". Then the drop-down list disappears, the selection stays in input field and the onSelect event is fired as if the item below the pointer was selected. But the input field still just contains the "p". This behavior seems inconsistent to me. Since the user did nothing to select an item, I don't think the onSelect event should be fired.

The behaviour is i bit different in the "advanced-demo". Here the input field is set in the onSelect event function, so the the contents of the field becomes what ever was below the pointer when the drop-down list opened. But still it seems wrong to me that an item is selected without the user explicitly selecting it.

Regards,
Lars Hansen

Hi,
Can i ask if it is possible to search an item from the beginning of the string only?
Like this.

Thanks.

This plugin is great. But I want to hard code an option at the end of the list of options that calls a function onclick. Like this:

$('.autocomplete-suggestions').append('<a href="javascript:manualEntry();">Enter manually</a>');

This appends the a href, but the link, in this case a function call is ignored and the 'onselect' behaviour is called instead. How can I call this 'manualEntry' function instead?

Any help would be awesome - thanks!

Hi,
I can't find the latest version on bower update and the bower UI is not showing your plugin. Would be great if i could bower install it.

bower jquery-auto-complete#1.0.5   invalid-meta jquery-auto-complete is missing "main" entry in bower.json

• Any chance of amending bower.json to include?

"main": [
  "jquery.auto-complete.css",
  "jquery.auto-complete.js"
],

just type completely some word from autocomplete list and press [tab] key fast. The suggestion container is not disappearing at all.

i've fixed it like this:

            that.on('blur', function(){
                //console.log('blur');
                //that.updateSC();
                setTimeout(function(){
                    //console.log('hide me!');
                    that.sc.hide();
                }, 500);

            });

but I think author can make it much better.

there is no example provided for AJAX and the example is not descriptive enough

source: function(term, suggest){
try { xhr.abort(); } catch(e){}
var suggestions = [];
xhr = $.getJSON('randomsearch.php', { q: term }, function(data){ $('#searchquery').text(term); renderitems(data); });
},

how should be suggestions vs choices and matches handled in this case? this is not explained properly as all the suggestion examples are only given for the static list of choices.

With my rare case when I select a suggestion by mouse if I set a minChars = 0, input field gets a focus and browser makes a request again and the list of suggestions drops down again too.
Is a way to fix this problem?

Idea: add a new option like set_focus_on_input_field_after_selecting with default true value.

I am using your plugin on responsive website. I have problem on Android. After using keyboard and entering some keywords your plugin is showing some search results. But after clicking on some highlighted results nothing happens and result area is hiding. Your plugin understand that click as clicking outside search results. Is it possible to change the behavior of the plugin for mobile devices?

Hi, I'm going to host this lib on https://cdnjs.com.
But I meet a problem.
Because I need to add the git autoupdate config.
Can you add the latest version tag?

I saw the version of the master branch is 1.0.7.
But your latest version tag is still 1.0.5.

cdnjs/cdnjs#7572

When i make an AJAX call all the results are shown?

Is there any problem?

json ["bike","carro"]

$().ready(function() {
    var xhr;
      $('#equipa').autoComplete({
          source: function(term, response){
              try { xhr.abort(); } catch(e){}
              xhr = $.getJSON('includes/autocomplete.php', { q: term }, function(data){ response(data); });
          }

      });
        });

1. I use the source function to provide an array of objects. Great.
2. I use renderItem to take each one of these objects and generate some HTML from them. Great.
3. I select one of the suggestions. The field's text is passed to onSelect. Bad.
4. I noticed the data-val attribute is what is actually passed to onSelect. I change this to contain an ID so in onSelect I can then look up this ID and get the associated object. Not nice since it still doesn't give me the actually item / object when I select but it'll do as a workaround. Nope, when I press down to go onto an item, the ID is shown in the field. So whatever data-val is, that's what's shown in the field but there's no way of accessing the source data. Bad.

Preferably, onSelect should be passed the item (too).

It would useful to trigger input from virtual keyboard.

i use Chinese input method in firefox ,but not work,unless i delete a word. what should i fix?

If someone can type really fast (or the delay is long enough) and hits "Enter" int the bound input, the autoComplete#source runs into success(). In that case, the user does not need the autoComplete anymore, so we could clean the timer?

So I changed "keyup.autocomplete" Event, but do not know, if that is the proper place to do so.

that.on('keyup.autocomplete', function(e) {
    if (!~$.inArray(e.which, [13, 27, 35, 36, 37, 38, 39, 40])) {
        var val = that.val();
        if (val.length >= o.minChars) {
            if (val != that.last_val) {
                that.last_val = val;
                clearTimeout(that.timer);
                if (o.cache) {
                    if (val in that.cache) {
                        suggest(that.cache[val]);
                        return;
                    }
                    // no requests if previous suggestions were empty
                    for (var i = 1; i < val.length - o.minChars; i++) {
                        var part = val.slice(0, val.length - i);
                        if (part in that.cache && !that.cache[part].length) {
                            suggest([]);
                            return;
                        }
                    }
                }
                that.timer = setTimeout(function() {
                    o.source(val, suggest);
                }, o.delay);
            }
        } else {
            that.last_val = val;
            that.sc.hide();
        }
    } else if (e.which === 13) {
        // stop on "Enter"
        clearTimeout(that.timer);
    }
});

As the title says, it doesnt show the drop down at all.

$('input[name="q"]').autoComplete({
minChars: 2,
source: function(term, suggest){
term = term.toLowerCase();
var choices = ['ActionScript', 'AppleScript', 'Asp', ...];
var matches = [];
for (i=0; i<choices.length; i++)
if (~choices[i].toLowerCase().indexOf(term)) matches.push(choices[i]);
suggest(matches);
}
});

the results gets filter as we type in the above example,
is there a way to filter the results that are returned from the ajax call like

$('input[name="q"]').autoComplete({
source: function(term, response){
$.getJSON('/some/ajax/url/', { q: term }, function(data){ response(data); });
}
});

Would be handy 👍

Hi:

I like your plugin. I would like the box follow the input when the page is in scrolling. That is to say, when the box is visible and I scroll the web, the box stay in the same position until I press some key. Is it possible?

Thanks.

Hi:
It would be useful to launch onSelect with Tab. I added the condition at the line 123:

else if (e.which == 13 || e.which == 9) {

I hope that helps. Until now I don't have problems.

Greetings.

Auto complete suggestion is not having correct position with respective control. attached image

This is happening with windowPhone 8.1 IE 11.
you can verify it with https://www.browserstack.com as real device experience

Hi,

When I am using the keyboard to select one of the items in the dropdown, if I press enter key it tries to submit the form.
How could I make it work also on enter (to override the default form behaviour)?

Cheers,
Alex

I'd like to be able to add a class to the dropdown box so I can style specific ones in specific ways. This can easily be added to this line: https://github.com/Pixabay/jQuery-autoComplete/blob/master/jquery.auto-complete.js#L28

It is not possible to scroll dropdown list on device with touch screen. IE 11. When touch in dropdown area, the list hides immediately.

Hi,

Please help me check this issue in Firefox, When in input japanese text, hiragana,kata.... It don't show list suggestion timely, After I press button Enter to confirm it will show list suggestion.

Best regards,

Hi,

thanks for making this great plugin.
The positioning in https://github.com/Pixabay/jQuery-autoComplete/blob/master/jquery.auto-complete.js#L42 and L43 doesn't seem to work for me.
The webpage I'm trying to use this in is XHTML, rather than HTML5. It might have something to with that.

Anyway: I fixed my positioning problems (no width and top-offset could be calculated) by passing true as a parameter to the functions outerWidth and outerHeight.

My code now looks like this and works fine:

                that.sc.css({
                    top: that.offset().top + that.outerHeight(true),
                    left: that.offset().left,
                    width: that.outerWidth(true)
                });

I don't really think that this is the real/nice way to fix this, it's more of a workaround.
Do you have anymore ideas on how to fix this?

So long,
Tobias

when I had to choose one result, then I delete all text and start typing again, sending ajax become redundant

ps: sorry for my bad english

Hi,

If I have list of 400 000 words (plain .txt file), can I lookup in the list, not to provide an array? Based on the alphabet there can be 50 smaller lists, but anyway I can't list all of them in arrays, they would be too clumsy.

Thanks

Hi!

Thanks for the good work to made this plugin it is awesome.

But I have some problem, the data is saved when input change, and I need to get the ID of input to do change event.

How I can get the ID or Data attr of input?

I need get the element of input here:

onSelect: function(e, term, item){
$(some_ref_of_element).val(term).change();
}

If a value contains bad HTML, this will be executed within the function suggest(data).

'<img src="x" onerror="alert(1)">'

This can be used as example.

Fix could be, that renderItem() would work with HTMLElement or jQuery as return-type, but this will break the API.
Example:

renderItem: function(item) {
    var div = $(document.createElement("DIV"));
    return div.addClass("autocomplete-suggestion").text(item).data("val", item);
}

On top of that, rewriting the method suggest(data) is required, to be able to work with HTMLElement or jQuery. I've done it like this, without breaking the API for String:

function suggest(data) {
    var val = that.val();
    that.cache[val] = data;
    that.sc.empty();
    if (data.length && val.length >= o.minChars) {
        // using strings is unsecure
        // but old API #renderItem returns string
        var s = '';
        for (var i = 0; i < data.length; i++) {
            var rendered = o.renderItem(data[i], val);
            if (typeof rendered === "string") {
                // old API support
                s += o.renderItem(data[i], val);
            } else {
                that.sc.append(o.renderItem(data[i], val));
            }
        }
        // old API support
        if (s.length > 0) {
            // this enables XSS
            that.sc.html(s);
        }
        that.updateSC(0);
    } else {
        that.sc.hide();
    }
}

I am using Chrome on MacOS and when I click on the field to see suggestions, scroll down to some suggestion and click on it, it selects the suggestion that corresponds to the one that would have been clicked if I never scrolled. Simplified example: if there were items 1, 2, 3 and 4 and I can see only 1 and 2, and scrolling all the way down shows 3 and 4, then clicking on 3 will select 1 and clicking on 4 will select 2. Scrolling mid-way so that 2 and 3 are visible would cause clicking on 2 to select 1 and clicking on 3 to select 2. Let me know if it makes sense.

I can reproduce this issue on your demo page. It appears that on mouse down it scrolls all the way up, which is hard to notice on click.

This issue can be reproduces about 50% of the time.

if i change cache options to false, than there should be no values for empty input.
try the following steps:

• set cache: false
• start typing in some input to get some autocomplete list
• pick any result from autocomplete
• delete this result
• press [down] to get last results
  in my opinion there should not be any results, especially with cache:false

Hello,
I am trying to make autosuggest work for country/state. Following works, but if i change "#autocomplete-27" from UK to US... it keeps populating the UK (first selected datasource). I tried using the destroy, but it doesnt work. Can anyone please help?

jQuery(document).ready(function(){

    jQuery("#autocomplete-27").attr({
        'disabled': 'true',
        'data-ajax': '',
    });

    // jQuery('#autocomplete-26').bind('change', function()
    jQuery('#autocomplete-26').on('keypress change blur', function()
    {
        var dataSource = jQuery("#autocomplete-27").attr('data-ajax');

        jQuery("#autocomplete-27").removeAttr('disabled');

        jQuery("#autocomplete-27").attr("data-ajax", function(i, origValue){
            var selectedValue = jQuery("#autocomplete-26").val();
            return 'https://domain.com/' + selectedValue + '.json';
        });

    });
    /// this does not work :/    
    jQuery("#autocomplete-27").autoComplete("destroy");
});

First of all, thank you so much for delivering such a tremendous tiny script :)
I haven't found anywhere a possibility where i can contact you, so i am doing it here to ask 2 Questions and hope you don't mind it.

We are using your script for geo data that is separated by comma for example: State, County, City

1. How can we manage it that we can type in the State and City and both will be recognized? In other words every phrase separated by comma should be auto-completed.
2. How can we manage that special signs (for example e,é or a,ä) will be case-insensitive, so when typing in Andre, beside Andre also André will be matched.

Thanks for your work!

How I can do an exact match?

like if i type in 'A', it should only show items start with 'A'

I have product titles with inches shown as a " its causing some issues. Nothing shows in the textarea after the quote.

Hope someone can offer some assistance.

I downloaded and have trying out this control. Version 1.0.5.

The problem I'm having is that when Internet Explorer (I'm running version 11), when I type "a" for example and a large list appears in the drop down (and a vertical scroll bar appears), when I move the mouse to the vertical scroll bar and click on the bar to try to slide the bar down using the mouse, the drop down immediately disappears. This behavior does not happen in Chrome. This is easily reproduceable (http://goodies.pixabay.com/jquery/auto-complete/demo.html). Please can this be addressed?

Would it be possible to make the autocomplete fire on the input focus event? It could just be an option in the params list when initialising the autocomplete.

Also, thank you for a great minimal pluginl

Can you create a release for v1.0.7 so I can download this version with bower?

I can't even find 13 (the keycode for enter) anywhere in the code. It does put the item's text in the field, but I can't see where it does that.