agarzola / jqueryautocompleteplugin Goto Github PK

Jörn Zaefferer’s (now deprecated) jQuery plugin, with tweaks.

JavaScript 96.56% CSS 3.44%

jqueryautocompleteplugin's Introduction

#jQuery Autocomplete Plugin 1.2.3# This project is no longer supported.

##About this jQuery plugin## Jörn Zaefferer’s (now deprecated into jQuery UI) jQuery Autocomplete Plugin, with a small modification to enable UP/DOWN arrow keys, allowing navigation of input element text. This is particularly useful in cases where autocomplete is used in a textarea element where navigation of text via UP/DOWN arrow keys may be necessary. The tiny fix is documented with comments in the relevant lines on the development file (jquery.autocomplete.js). The .min and .pack files have the fix without specific annotation within the code.

We use it in Claritty.com for when a user wants to write a twitter username or a previously used hashtag within a new tweet, so “@” and “#” are trigger the script. While not triggered, though, the plugin still hijacks the UP/DOWN arrow keys making navigation of the text a pain in the ass when the user has multiple lines. This modification prevents this behavior, hijacking the arrow keys only when the autocomplete script has been triggered.

The original plugin is now deprecated, but this mod works well with jQuery 1.3.2 thru 1.4.4.

##Documentation## Introduction to the original plugin, and an explanation of original plugin options are included in the docs folder. (Documentation at the jQuery site is expected to shut down eventually.)

This modification shouldn’t break any of the options discussed at the these documentation files.

##Abridged Changelog## ####1.2.3 --AGA####

Merged disc’s fork: Removed depricated $.browser (jquery 1.9+)
Merged miketaylr’s fork: account for retooled key events handling in newer Opera
Correct typo introduced in one of the previous merges
New minified and packed versions

####1.2.2 --AGA####

Merged agmcleaod’s fork: Added failure to the options hash: failure
Merged borkor’s fork: New option not to jump to first or last position: scrollJumpPosition
Deleted silly console.debug() line left over from testing.

####1.2.1 --AGA####

Added option to activate select list with one click instead of two. clickFire is false by default. (Requested/recommendation by fgosfacdjtq.)
Added option to forgo input focus on item select. inputFocus is set to true by default, but setting it to false in the options will cancel this behavior.
Circumvent browser JS bug when user clicked on results list scrollbar and then clicked outside of the list that caused the list to not hide.
Changed hijacking of PAGEUP/PAGEDOWN keys to prevent default behavior only when selections list is visible. Helps text navigation inside input element.

####1.2 --AGA####

Use recursive merging when extending setOptions. (Request/recommendation by smarques.)

####1.1.1 --AGA####

Changed hijacking of UP/DOWN arrow keys to prevent default behavior only when selections list is visible. Helps text navigation inside input element.

See changelog.txt for pre-1.1.1 entries by original author.

##Licensing## As with the original Plugin, this modification is dual licensed under the MIT and GPL licenses: http://www.opensource.org/licenses/mit-license.php http://www.gnu.org/licenses/gpl.html

jqueryautocompleteplugin's People

Contributors

Stargazers

Watchers

Forkers

sean-wallace jyn gorakhargosh neomindlabs mrhanlon agmcleod david-harkness parauchf ch00by mb2o jimallman georgyangelov alexis ajaykumarannair ajayknair mla tablatronix redgoose miketaylr jmlweb asemonize thiagoandreotti firulais omixen heyjinkim matgi lixora mpjoshi callmephilip ludwiczakpawel mpmedia pillex craigmoliver lonjoy saraelshobaky mrigess juco linkerman kasparsj muyangren dodisabaruddin sabershi cloudy-office ultrasimplified longmeng judy82w wordpressdev julien-c clestial carlos121493 girikudlur wangwen1220 krnlde maraev joshrezende zhuhh igq doik xyf514330947 shanekenney whenkey90 mattocchi mavdev pczerkas htcvaibhav codeyellowbv coquer indian2020 thongtran-dev shawnye biks152207 l475021377 lseyesl mawmawmawm vsilent haitaomu siebeneicher wellic eworthcms goblena shatilov-pro macgruber11 276509842 rockanita mani9610 magedgamal boldfacedesign celebigil trycqtxh giver holysky5 aland pannj developerarj-zz patriot qiuguoqiang lisi2580 tusong znyet refinedking

jqueryautocompleteplugin's Issues

Odd with manually selecting item vs tab/enter select

jQuery 1.5.1 not supported?

The plugin does not seem to work with jQuery 1.5.1 or higher. Will you be able to fix that?

minchars and matchContains

If i set minChars to a value greater than 0, autocomplete stops working entirely unless I also set matchContains:true.
Anyone else see this behavior ?

jQuery JavaScript Library v1.5.1

Sugguestion: $.ajax add type option

When I use ajax to load data, I find the server receives request with 'Chinese garbled' ,
and can not handle it.

I add type : 'POST', after lin 389 inside $.ajax call body, the server can get correct-coded character.

IE9 popup not showing up

The popup doesn't show up in IE9. Not sure of the cause, but when blur occurs I still get the first option auto filled in my field.

How to deselect the item from list which already selected.

I use this plugin in my application, all going good except
in my application, we dont want to select the same item again and again,
So is there any solution to handle that

IE 9 probelm with click event in dropdown for multiselect

In Firfox the plugin is working like a charm.
In IE 9 when clicking in the dropdown for selecting an item is just working correct the first time in a multiselect.
When selecting the second (or further) item for multiselect a problem arrises: The current (first selected) value is overridden and the letters typed in are joined.

Example:

Typing e.g. "sc" into the input, the dropdown appears, click with mouse on "Scott Tiger". "Scott Tiger; " is copied into the item and the letters "sc" are cleared from the item. Everything is fine in IE 9 and firefox.
Typing e.g. "jo" into the input, the dropdown appears, click with mouse on "John Dow". Firefox is fine, the value "John Dow; " is copied into the item and the lettes "jo" are cleared. The item now holds the values "Scott Tiger; John Dow; "

Problem in IE 9:
The item holds the wrong value "John Dow; jo"

IE 9 overrides the already selected values of the multiselect and does not clear the typed in letters for selection.

Thx a lot for some hints.

<html>
  <head>
    <script type='text/javascript' src='lib/jQuery-1.4.4.min.js'></script>
    <script type='text/javascript' src='jquery.autocomplete.js'></script>
    <link rel="stylesheet" type="text/css" href="jquery.autocomplete.css">
    <script type="text/javascript">
      $().ready(function() {
        $('#ac').autocomplete(['Scott Tiger', 'John Dow'], {multiple: true, multipleSeparator: '; '});
      });
    </script>
 </head>
  <body>
  <form>
    <input id='ac'>
  </form>
  <body>
</html>

You may try it here:
http://jsfiddle.net/t7xeY/

Submit on click

I want to ask whether it is possible to help me do by clicking on any of the results to send the form. Its possible?

Like this http://jsfiddle.net/uXHCQ/ but for jQueryAutocompletePlugin, I think it would be useful not only to me but to others.

Change the name of the autocomplete function?

As you know, JQueryUI has also a function named autocomplete. You might consider changing the name of your autocomplete function.
I don't know if it is my fault but your autocomplete plugin does not work when I also use jqueryui libs.

NOTE : I've already fixed it by changing the name of the function.

Make no-match more user friendly

When the option mustMatch is true and the user enters some text that doesn't match any fields the search result box disappears almost instantly (200ms). This instant disappearance can signal an error to the user. It would be better if the search field was highlighted red, and the search result box faded out slowly.

Clicking on scrollbar in ac_results breaks .blur() behavior

Steps to reproduce

Set up a situation where the results produced by autocomplete have a vertical scrollbar.
Click on the scroll bar
Click somewhere outside the autocomplete setup
The div showing the results should disappear, but it does not.

I've temporarily worked around the problem by adding this to my code:

    $(document).click(function(e){
        var t = $(e.target);
        if (t.parents('.ac_results').length == 0 &&  !t.is('.ac_results') &&
            t.parents('#input_wrapper').length == 0 && !t.is('#input_wrapper')) {
            $(".ac_results").hide();
        }
    });

add an option to display the results onFocus

Problem: as a user I'd like to see the list of results before I type anything. I should be able to click on the input box and have it bring up the first # results with out typing anything. At the current moment I have to double click on the input box for this to happen.

Line 146 should be changed to the following:
}).focus(function(){
// track whether the field has focus, we shouldn't process any
// results if the field no longer has focus
hasFocus++;
if (config.quickViewResults && !select.visible() ) {
onChange(0, true);
}
....

Default value of multiple Separator option

Docs state that it's ', '
But it's ' ' (space) in the code.

Don't sure when and why this was changed but suppose it should be fixed one way or another...

div cleanup

I'm having a problem using this in an ajax application. I start by typing and making a selection from a long list. The results displayed are updated, and a shorter list of suggestions is built. When typing again there are 2 lists of suggestions.

To fix this, in the init() function, before line 618, I added the line
$("div."+options.resultsClass).remove();

This fixed my problem. It didn't help to put the remove() call anywhere in my code.

Sorry if I've missed something and the error is mine. And many thanks for keeping this module alive.

Default options class

Hi,
when using the plugin with default ajax handlers, the request might not go through (actually, not call the plugin's success function.) The cause was when I called something like this elsewhere in the scripts:

jQuery.ajaxSetup({
    success: myGenericHandler,
    dataType: "json"
});

Then, none of the requests would call the succes handler of autocomplete, therefore, not displaying the results.

Fix is on line 23, modify the default options class:

options = $.extend({}, $.Autocompleter.defaults, {
    url: isUrl ? urlOrData : null,
    data: isUrl ? null : urlOrData,
    delay: isUrl ? $.Autocompleter.defaults.delay : 10,
    max: options && !options.scroll ? 10 : 150,
    dataType : isUrl ? 'html' : null
}, options);

-> simply set the datatype.

The "datatype" parameter is used within the rest of the class, but there's no default value for it. Adding this line will fix the problem with issue above.

Blur Issue

Hi
How are you. I wanted to ask you is there anyway of tracking the blur even in such a way that if a user enters some text in the auto-complete input box that does exist in the result but he manually types the whole option and then just clicks on some other input field is there any way to handle this blur so that the hidden field gets auto populated

Stopped working with Jquery 1.4+

Hi, this is a great plug-in, and I've been using it for a long while now with no issues. However, I had to upgrade to a later version of jQuery to take advantage of another feature, and as a result this stopped working. It works perfect for jQuery 1.3.2, but not with 1.4.4. Is there any chance you can fix that? I've actually contacted Jörn about it, and he first recommended to upgrade to the jQuery UI one, but then after I wasted a day and could not get it to do what this one does for me exactly, he suggested that I contact you and see if you can make it work with 1.4.4.

Thanks very much, the issue is when I start typing in the text field nothing happens...

local+remote source

hey.

I tried to achieve a combo of two sources - one predefined and one remote.

I've set the data attribute to the local variable and update it from time to time (+triggering attribute data change).
Problem: sometimes it tries to get the default url ( like /search?q=... ) + the list won't get updated the moment it t gets changed by
$input.setOptions({data:DATA_VAR})

triggering search() didn't help either...

any ideas?

matchContains = "word" is not working with international codings

if (options.matchContains == "word"){
i = s.toLowerCase().search("\b" + sub.toLowerCase());
}

this part of code is not working properly. Regexp symbol \b does not support encodings except ascii.

s = s.toLowerCase(); // "s is undefined" - jQuery 1.4.4

I'm having an issue with jQuery 1.4. The first search I run works great, the second one says "s is undefined". Looking into this I"m having a hard time determining what's going wrong. the json I'm using is here: http://asdfj34j.pastebin.com/b3xfS1A0

The code I'm using to initialize the autocomplete is here: http://asdfj34j.pastebin.com/dE4PbSmH

Thanks again for supplying this plugin. We don't want to use the jQuery UI because it's too bloated with stuff we'll never use.

Keep version in header the same as the actual release

Currently the .js file's header says 1.2.1, but the release notes state 1.2.2

little problem with setOptions and extraParams, fix included

I noticed a problem when using setOptions to add an extra param, after the field has been initialized and used.
the code looks like this
bind("setOptions", function() {
$.extend( options, arguments[1]);
// if we've updated the data, repopulate
if ( "data" in arguments[1] )
cache.populate();
})
this means the extend call is NOT recursive, but I think it should be, or alle xtraParams would be erased by any subsequent call attemting to just add a new extra param, not removing the old ones...

my fix was to change the code like this, note the first param to extend that turns on recursive merge... this option is available only in jquery > 1.4:
bind("setOptions", function() {
$.extend(true, options, arguments[1]);
// if we've updated the data, repopulate
if ( "data" in arguments[1] )
cache.populate();
})

Prevent jumping to first item when clicking keydown on last item

Maybe there is a an option to prevent this anoying behaviour, but I just cant find it.

Smarter autoFill feature

Currently, autoFill populates the input field with the value of the topmost result in the results list (considered the most relevant). A better autoFill would change the value in the input field every time the user changes selection via UP/DOWN and PAGEUP/PAGEDOWN keys. Very similar to what Google does when selecting search term suggestions below the search field.

Feature requested by schnabler.

Term filtering bug

I wrote a detailed explanation about this here:
http://stackoverflow.com/questions/4643469/jquery-autocomplete-plugin

basically if you type 1 character, or a string of random characters you'll get a list of all terms.
Any solution for this? :(

Failure callback/option

I built this using the 1.1pre version (didnt realize this version existed). It's some simple additions i did so that if you wish to specify what happens when your value is not found, it can be done. I haven't tested it when using an ajax source as supposed to an array.

https://gist.github.com/942871

If you'd like me to, I can try forking your current repo and try to rework it in your version do perform a pull request.

matchSubset fails with formatItem, formatResult

Using formatItem and formatResult, "foo" show "foot" then typing "foot" show "No Records."
matchSubset is true by default.
The workaround is to set matchSubset: false, this may increases server load and decreases performance

result div not correct width when input has padding.

Hi,

So I am new to github and the autocomplete plugin but I like it so much more than the one built into JQueryUI.

Amway, I found one thing that I wanted to submit as a UI adjustment: if input text element has left/right padding, result DIV does not come back at the correct width.

Line 765:

width: typeof options.width == "string" || options.width > 0 ? options.width : $(input).width(),

could be replaced with:

width: typeof options.width == "string" || options.width > 0 ? options.width : $(input).width() + parseInt($(input).css("padding-left")) + parseInt($(input).css("padding-right")),

I also have a nice demo page to add to this plugin showing above that includes some formatting. not sure how to attach but I could email.

thanks!

Not detecting international accents

In Spanish, French and other languages some words have accents such as "á".
Issue is that the plugin doesn't detect accentuated and unaccentuated characters as the same one when searching (á==a).

Example: When searching "tra" the word "Tráfico" doesn't show up.

No suggestion list on when type "DEL"

When I delete a word with "DEL" key. And mouse click on the same field, autocomplete stops working. I found that the problem is here:
if( lastKeyPressCode == KEY.DEL) {
select.hide();
return;
}
probably it would be nice to have an option by default which allows autocomplete on delete key ?

JQMIGRATE: jQuery.fn.bind() is deprecated for jQuery v3

JQMIGRATE: jQuery.fn.bind() is deprecated
jQuery v3.2.1
jQuery Migrate - v3.0.0 - 2016-06-09

but it seems everything work fine.

Another thing, jquery.autocomplete.min.js header reports "jQuery Autocomplete plugin 1.2.2" instead of 1.2.3, so I use the not minified file.

console.debug left in code

Line #614 of jquery.autocomplete.js

It logs "false" every time the mouse moves into and out of the match list.

Missing indicator.gif

Thanks for maintaining this code.

FYI, the CSS file is referencing indicator.gif which does not exist.

I found this one on the net.

Seems like you would want to put this in your repo. :)

I could do a pull request if you need the help.

Thanks,
Micky

Only trigger the backend call when certain characters (like @ or #) are typed

It would be nice for servers and response times to have an option to do that.

Julien

onSelect or onClick

Hi, firstable i appreciate your effort on creating this great plugin,
i want to add onClick or onSelect event listener on the input which uses autocomplete, is it possible? Would you pls help me?
Thank you.

Function similar to jQuery UI AutoComplete "Select:"

Hello
I have following values returned from source in json format
{id, label}

i have set label to search and autocomplete on field category_label

I have a hidden field called id="cat_id"

I want to set id as value of #cat_id field, if an item is selected from suggestions.
Please confirm how can i do this. I dont want to use jQuery UI Autocomplete as i have an existing project and i need to add categroy id to a hidden field.