It seemed that there is no api to trigger the result list by a click, even when i set minChars to 0.
I want to click somewhere and trigger the result list , so that users don't have to input a single char. I can trigger it by:
var ac = $elem.data('autocompleter');
setTimeout(function(){
ac.activateNow();
}, 400);

However, after been triggered and if I don't choose anything and blur it, the result list won't hide.
Is this a bug? Any suggestions?

docs state:

"var ac = $("#input_box")[0].autocompleter; // A handle to our autocompleter"

should be:

"var ac = $("#input_box").data('autocompleter'); // A handle to our autocompleter"

When I use jquery-1.8.3.js it works fine. But, when I use jquery-1.9.1.min.js or jquery-1.9.0.js, even is fired when second letter is pressed.

Code used to fire ProcessRequest event is:

$(document).ready(function () {
    $("#<%=txtSearchText.ClientID%>").autocomplete("Search_CS.ashx", {

    });
});

with remoteDataType: 'json'

• was getting error 'results is null', the following fix worked for me
  ..its not necessary to parse json if the content headers are set correctly:

http://api.jquery.com/jQuery.ajax/
"json": Evaluates the response as JSON and returns a JavaScript object. In jQuery 1.4 the JSON data is parsed in a strict manner; any malformed JSON is rejected and a parse error is thrown. (See json.org for more information on proper JSON formatting.)

I'm trying to replicate http://stackoverflow.com/questions/2435964/jqueryui-how-can-i-custom-format-the-autocomplete-plug-in-results, but when I look at the method on line 766, there's no way I can extract what the user types and attempt to format it given just the parameters "result". Is there any way to obtain user input by modifying a method? Am I looking at the wrong lines of code or overlooking existing functionality? Thanks!

I have a json data in a separate file (airport.json) as below

airport.json

{"DEL":{"id":"31973","airport_name":"Indira Gandhi","latitude":"28.5632","longitude":"77.1183","timezone":"5.5","dst_indicator":"N","city":"New Delhi","country":"India","country_code":"IN","region":"TC1","listing_display":"true","pseudonyms":"New Delhi,Delhi"}, "CCU":{"id":"31965","airport_name":"Netaji Subhas Chandra Bose","latitude":"22.6453","longitude":"88.4401","timezone":"5.5","dst_indicator":"N","city":"Kolkata","country":"India","country_code":"IN","region":"TC1","listing_display":"true","pseudonyms":"Kolkota,Calcutta"}}

In html file i have written code to initialize autocomplete

$(".city").autocomplete("js/airports.json",{
    remoteDataType:'json',
    minChars: 3,
    max: 8,
    autoFill: false,
    mustMatch: true,
    matchContains: true,
    scrollHeight: 220
});

TEXTBOX

But is returning list as a srting like below:
{"DEL":{"id":"31973","airport_name":"Indira Gandhi","latitude":"28.5632","longitude":"77.1183","timezone":"5.5","dst_indicator":"N","city":"New Delhi","country":"India","country_code":"IN","region":"TC1","listing_display":"true","pseudonyms":"New Delhi,Delhi"}, "CCU":{"id":"31965","airport_name":"Netaji Subhas Chandra Bose","latitude":"22.6453","longitude":"88.4401","timezone":"5.5","dst_indicator":"N","city":"Kolkata","country":"India","country_code":"IN","region":"TC1","listing_display":"true","pseudonyms":"Kolkota,Calcutta"}}

and getting a error "not well formed".

My data should be in below format only for display(city, country_code - airport_name (city-code)) but to match it should take pseudonyms as well :-

List should be like

New Delhi, IN - Indira Gandhi (DEL)
Kolkata, IN - Netaji Subhas Chandra Bose (CCU)

If a delimiter is used IE version 8 and less fails on this function:
$.Autocompleter.prototype.getValue = function() {
var val = this.dom.$elem.val();
if ( this.options.useDelimiter ) {
var d = this.getDelimiterOffsets();
return val.substring(d.start, d.end).trim();
} else {
return val;
}
};

It fails on trim() which is not defined in IE for string.

Hi there,

I'm having a problem that i couldn't solve by myself. I'll have de data parameter as an array of array, where the first position will be the name of the user, and the second, will be the id, like shown on the example.

data: [
['Rafael Lira', 1],
['John Example', 2],
['Bob Test', 3]
]

on the "onItemSelect" option, i want to catch the this id (the second parameter, the number) and write it on the Value of an input type hidden.

I did that by capturing the "item.data" value, wich returns me the number.

Ex:
onItemSelect: function(item) {
var id = item.data;

        $("input[type=hidden]").val(id);
    }

But when i try to write it on the input hidden, it writes the name (text) and not the number.

Am i doing something wrong? Any ideias?

Thanks!

Listed items with special characters don't show properly. A word like 'Begoña' is shown 'Bego�a'.
I can HTMLEncode the word to fix the problem but the when I type 'ñ' I don't get any suggestions.

Any help? I'm missing something? Thank you.

The browser detection fails because $.browser is used to detect IE.

From the 1.9 final release notes:

jQuery 1.9 and 2.0 have the same API. Several deprecated features such as $.browser
have been removed from both versions. It’s all laid out in the jQuery 1.9 upgrade guide.

best

martin

Hi,
when mouse hovers the result list, cursor is set as pointer.
Which Autocompleter's option enables to change it to other cursor value ?
Best regards

Hi,

mustMatch is not working when minChars is set to 3. It is starting to work on a single character. when we press 3-4 character quickly it stop working.

I have set it as below:-

mustMatch:true,
minChars: 3,

Regards,
Sushil

how can i enable categories in autocomplete like the jqueryui autocomplete

I have an issue with users pressing the "Return" key too quickly, before the results of the server lookup can be displayed. The problem is that the form that contains the input field with the autocomplete is submitted. If the user waits for the results to be displayed, the Return key works as designed ... it's just a problem if the hit the "Return" key too quickly. Is there some way I can trap for that condition?

Hi,
Autocomplete plugin version 1.1 (at least) provided the ability to have an input box with multiple values, separated by a separator (usually a comma). ex: [value1, value2]. This feature was possible with 2 Autocompleter options: multiple (boolean) and multipleSeparator (default = ",").
I didn't retrieve this ability in dyve Autocompleter, neither with these options nor with workarounds.
Can dyve Autocompleter achieve this ?
Best regards

If you have your form in an overlay, like I am using FancyBox. The data is set, but the popup list doesn't display in the overlay with the input. It ends up being hidden behind the overlay. Maybe can be fixed by having a property/option to set the z-index.

Hi there !

I've got a problem I can't solve by myself, I've already try to search on the web without succeed... so I finally post here !

Here is my code :

    $("#search_city").autocomplete({
            url: '/ajax/get_city.php',
            minChars: 3,
            extraParams: {
                dept: function() { return $("#search_dept option:selected").val(); }
            },
            mustMatch: false
        });

When I try to get the value of $_GET["dept"] in my php script "get_city.php" I've got the entire code : "function() { return $("#search_dept option:selected").val(); }" as a string instead of the real value of this field !

Do you have any idea of what append to my script ?

Thanx a lot for your help!
Boo

PS : sorry if my english isn't perfect, I did my best...:-)

$("#ac1").autocomplete is not a function

is the error I am getting in Firebug, anyone else having this problem or is it just me? I am trying to get the demo to work, as is. Also there doesn't seem to be any documentation for the data: option...

Hi,
I think that if you want the autocomplete activated, it should autocomplete with the same value as you get from the displayValue function.

I just did it in my own project updating the line "this.dom.$elem.val(value);" in the autofill function to "this.dom.$elem.val(this.displayValue(value,filter));"

This way the autofill option shows the values in the textbox formatted the same way as when you click on an option.

Regards

In IE9, when autocompleter appears and in some other cases, it has a wrong width (full-page).
When using autoWidth: 'width', no problem.

I'd like to attach some sort of markup that would inform the user when there are no results from the server (determined by an empty array server output). Currently, the only way I see to determine this is to check the data length from a custom processData function, since there's no other callback. Is this the preferred way? It would be nice to have a <div> already created and positioned where the $results DOM is, which displays when there's no results. This would enable something like what Facebook does:

Can someone provide an example of how to output "showResult". My data returns via json, but I can't figure how to output the value/ data in my input field. (I use jquery chosen script for my input field, does that have any effect)?

$("#name").autocomplete("post.php?output=json",{
    mustMatch: true,
    maxItemsToShow: 15,
    remoteDataType: 'json',
    showResult: function(value, data) {
        return '<span style="color:red">' + value + '</span>';
    }
});

dyve, as a further suggestion, I would recommend including additional examples on how to handle JSON server output. My output, for example, was formatted such as: [{firstname:'John', lastname:'Doe'}, {firstname:'Jane', lastname:'Smith'}]

I had to reformat this data in the processData function, generating:
[{value:'John Doe', data:{firstname:'John', lastname:'Doe'}}, {value:'Jane Smith', data:{firstname:'Jane', lastname:'Smith'}}]

While I figured it out, a little more clarity regarding what value and data is would be greatly appreciated. I assumed data was the full result list, not secondary data related to a specific result.

In some cases its useful to have link to the owner element, with this patch I can do such things

onNoMatch: function() { $(this).val(''); }

=== PATCH ===

524c524

- return f(data, this);

•         return f.call(this.dom.$elem, data, this);
  

  561c561

- results = self.options.processData(results);

•             results = self.options.processData.call(self.dom.$elem, results);
  

  605c605

- self.options.onError(jqXHR, textStatus, errorThrown);

•                     self.options.onError.call(self.dom.$elem, jqXHR, textStatus, errorThrown);
  

  745c746

- return sortFunction(a, b, filter, self.options);

•       return sortFunction.call(self.dom.$elem, a, b, filter, self.options);
  

  869c870

  - return this.options.showResult(value, data);

  •         return this.options.showResult.call(this.dom.$elem, value, data);
    

Hello,

It is annoying, you only doing a GET ajax request.

May you create an option to use POST?

And do not add the params after the url but use the data ajax option.

You are doing:

$.ajax({
    url: 'file.php?param1=value1&param2=value2
});

Do instead:

$.ajax({
    url: 'file.php ',
    data: {
        param1: 'value1',
        param2: 'value2'
    }
});

Lets say there are 3 values

1. "a apple on a tree"
2. "there is a apple near the tree"
3. "the apple tastes good"

now searching for "apple" should show all 3.
But now when typing-further for "tree" it should still show results (1 and 2)

Thanks much!

On line 194 in the plainTextParser function, plain text is decoded, should it be ?

 data.push(decodeURIComponent(line[j]));

dyve, been working with this plugin today, and I love the flexibility. However, my custom results markup includes a nested UL. In your current implementation, selection of LI finds all the LI's in the result DOM, instead of just the highest level ones, used specifically for autocomplete. Consequently, any nested LI gets "selected" and forces the user to press the up/down keys for each of these items.

My solution was to replace all three occurrences of: $('li', this.dom.$results) with $('>ul>li', this.dom.$results).

noticed that the ajax dataType param is set to 'text' even when remoteDataType is set to 'json', this results in incorrect accept headers being sent to the backend e.g. "text/plain, /; q=0.0"1 rather than "application/json, text/javascript, /; q=0.01"

here is a fix:

Any chance or possibility of a pagination support for this great pluign? So you can return a paged set, with number of pages and you can query the server with the page number as well.

I'm using the autocomplete to fill some city fields on my website. In one specific section, i leave the autocomplete field hidden, then i fill it automatically so i can send it on a form (I know this probably isn't the best way to do it, being on a tight schedule it was the best i could think of).

When i do this using Google Chrome, it works perfectly. But when I use Firefox, i get the following error:
NS_ERROR_FAILURE: Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMHTMLInputElement.setSelectionRange]

It points out to line 979:
input.setSelectionRange(start, end);

This error only happens when the autocompleting field is hidden, and i'm using Firefox.

Does anyone have an idea about what's going on, or how to fix it?

Hi,
I tested the autoFill function, but it did not autofill within the IE 8.
It only inserted the whole word (cause I also use the selectFirst option), but didn't selected the rest of the word. In firefox it works well.
Thats what I'm trying to do:
$(function() {
$("#myField1").autocomplete('autoSuggestWrapper.cfm?func=myFunc&lang=1', {
minChars: 1,
selectFirst: true,
autoFill: true
});
});

After I modified the $.Autocompleter.prototype.selectRange function, it now works in IE as well.
Since I'm not familiar with your plugin, I'm wondering if my modification will make problems on other places within the plugin?

Here are my modifications:
$.Autocompleter.prototype.selectRange = function(start, end) {
var input = this.dom.$elem.get(0);
if (input.setSelectionRange) {
input.focus();
input.setSelectionRange(start, end);
// } else if (this.createTextRange) {
} else if (input.createTextRange) {
// var range = this.createTextRange();
var range = input.createTextRange();
range.collapse(true);
range.moveEnd('character', end);
range.moveStart('character', start);
range.select();
}
};

best regards,
uwe

The script crashes with message "PM Error: URIError: malformed URI sequence Source File: http://url/scripts/jquery.autocomplete.js Line: 194" (from firefox) when % sign exists in results.

Got an interesting issue. User enters a search in a field which has autocomplete, hits the submit button, looks a bunch of results, clicks the previous page button on the browser, and the field is now cleared of the search making it impossible for the user to amend the search. If I comment out the '$("#field").autocomplete(...)' the search is still there. I have looked at the code and did not see anything obvious. Any ideas?

After clicking outside the search field and hiding autocomplete results a focus activate one more time. See please at http://layot.prestatrend.com/ Type for example just 3 letters at search field 'ipo'. So how to make remove this re-focus behavior? Maybe it is that's why I am using 2007 version of this plugin but it is a part of CMS PrestaShop? Thanks for any reply!

I needed some values to be transformed directly, even though there is no matching element. i.e: to make uppercase. To solve that implement the toUpperCase in a 'beforeUseConverter' function, and I just added 'setValue' to 'beforeUseConverter' on the source code

$.Autocompleter.prototype.beforeUseConverter = function(s, a, b) {
s = this.getValue();
var converter = this.options.beforeUseConverter;
if ($.isFunction(converter)) {
s = converter(s, a, b);
}
this.setValue(s); //added setValue
return s;
};

But maybe there would be nice to have a 'transformAfterUse' option or something like that

I'm using rails to build an application. I have added your javascript and stylesheet files to my assets/ folders and they are being loaded properly.
I can visit the backend url and I receive an array of array data.
However, whenever I attempt to use the box in the view the plugin is wired into, I receive a GET failed error on jquery.js line 8103. Apparently jquery's default ajax handling is attempting to override your functionality. How do I fix this?

When using the JSON results I'm taking the data returned from the server and processing it using a processData function to return the following:

[
    {name: 'name', data: {id: 123}},
    {name: 'name', data: {id: 234}}
]

However I am flummoxed on how to get the id value when the user has selected an option. I don't see it when I do $('#ac_input').val() or easily recognizable within the .data().autocompleter object.

Is this data available somewhere in an easily accessible location?

any chance of catching events triggered by a virtual keyboard?

In my app, i am making a remote call to get json back. I have minChars set to 4. I get data back, but when I type the 5th character, it doesn't call back to the remove side to get more data. On the remote side I have pagination, so I only return 10 results. So 4 chars might really have more than 10 results in my database, but I don't want to have to retrieve all results in case it was hundreds of matches for 4 characters.

sorry not trying to fill up your issue tracker !!

.. just a quick question :)

is there a way to 'destroy' an autocompleter instance ?

tried a few things but not having any luck

cheers

Is there a way to Change the displayed value in the dropdown list, but keep the value when selected into their input field?

When I type "WO", it shows a list of similar words, like:

• world
• woman
• etc.

I would like to show a list like this one:

• world: click here
• woman: click here
  ...

And, if I click on a item, I would like to write into my input field only the first part of the value: "world", or "woman".
How sould I do?

If we type in some terms to activate autocompleter and than delete all terms, the autocompleter still displays. Most of the plugins I've tested will clear the autocompleter. Is there option to do this with jquery-autocomplete?

Thanks.

This is a "repost" from someone who submitted it on GoogleCode.

When the following css change is done to put a "scrollbar":
.acResults {
padding: 0px;
border: 1px solid WindowFrame;
background-color: Window;
overflow-x: hidden;
overflow-y: auto;
max-height:250px;
}

The div closes automatically when clicked on scroll bar in non-FF browsers.

I'm using the latest version as of today.

It may be a silly question, but I was wondering if the current behavior of the return key is a bug? I mean, I noticed that if you start typing a name that appears in the autocomplete list (which beautifully appears, mind you!) and don't select the item, but just press the return key - nothing happens. What I would expect is the form to be submitted with the input of the form field(s)!

This is the case with the preventDefaultReturn option set to true, and I'm explicitly NOT selecting an item from the autocomplete list.

Also, I'm using the autocomplete on an input field with css rule position:fixed. When the page is scrolled down a little, and one starts typing, the autocomplete div appears a distance below the input box, similar to the distance scrolled. I fixed this bug, but I'm new to github, so I'll read the tour before I screw something up. :) I can copy/paste the fix here, if requested.

Cheers and thanks for the great work!

This file doesn't have a licensing header on it: https://github.com/dyve/jquery-autocomplete/blob/master/src/jquery.autocomplete.min.js

The CSS lacks licensing as well.

//hack:support for inputing chinese characters in firefox
$elem.bind('input',function(){self.activate();});

In jquery.autocomplite.js there is line 418:
var totalHeight = $(window).height();
This line fails for me. Docs says, that for window and document objects method height() should be used.

Hope this helps.

We have the following scenario which fails:

• We use IE 8
• Delimiter is on (using a space as delimiter).
• We get a list of completions and clicks on oneof them with the mouse

Result: The result is inserted at the start of the for field, not the end. In addition a few characters are removed from the beginning of the line before inserting. That is if we write: "house wind" and we get a suggestion "window" which we click on, we get something like "window e wind" in the form field.

Selecting using arrow keys and enter, is working, though.