betamos/better-autocomplete

A flexible jQuery plugin which offers rich text autocompletion, both from local and remote sources.

better-autocomplete's Issues

Limit cache size

A way to deal with the potential performance issue would be to limit the cache size. The problem is that it would be too simplistic to just count all query string cache as equal size. They could have 1 or 1000 result objects. Even the number of result objects is not accurate, since a result object can vary in size. However, that would be out of the scope for this module anyway. If it's easy to implement, I think the best solution would be the latter option.

Results box appears below other elements in example.html

Maybe there should be another kind of positioning? Maybe BAC should not deal with this at all, but leave it to the integrating developer?

Insert results list div to any DOM element

The need can occur that a user wants to place the results list anywhere. Perhaps through a callback or by providing an optional parent element in the options?

Also, another question that arises from that idea is to deal with showing/hiding the results list.

[Feature request] Clear button (×) in the input field.

This is a UX design request:

When typing stuff on a mobile phone or touchscreen devices,
it may become hard to select text in order to clear the text box
in some use cases. An explicit "clear" button comes in handy
when using such a device.

For an example of what I mean by the "clear" button, you can
have a look at:

http://documentcloud.github.com/visualsearch/

The search field has a "x" button to clear the field. This helps
with touch screen input.

Cheers!
Khargosh. =)

Allow groups with HTML.

There would be nice to have the ability to use HTML in the result groups.

Its a very simple change.

.append($('<h3 />').text(group))

to

.append($('<h3 />').html(group))

Default to input blur on select

This was emailed to me by James Butler:

jquery.better-autocomplete.js Added Line 425:
424: callbacks.select(result, $input);
+425: $input.blur();
426: reprocess();
because the highlighted Better-Autocomplete option remained on screen until search field blurred.
I wanted when a selection was made, hide Better-Autocomplete.
(The highlight option appears again when the field re-gains focus, which is good.)

Sort Problem

the Value which I select 1st remains on the top for ever...
http://york.bncollege.com/webapp/wcs/stores/servlet/BNCBHomePage?storeId=32551&catalogId=10001&langId=-1

click on Department inputfield

Make a real make-file

Instead of just an executable file named make, create a real GNU make file. This would be a better idea i think… There could be also be separate labels for documentation and building.

IE: Scrolling results bug

When you click in the scrollbar in the search results, the result div is is disappearing.

IE versions 7-9

Test and eliminate bugs in IE 7-9 [Need help]

I want BAC to work in IE 7-9, if this is fairly straightforward I want it done before the initial release. I don't have easy access to a Windows machine right now, but I will try my best to fix it myself.

If you feel that you can help out, it would be awesome. Just send me a pull request or a patch.

Insufficient knowledge of current remote calls

This bug occurs only with remote resources. To recreate

• In the example, type fast, e.g. "america", then wait for the fetching to begin (grey background).
• Now quickly press a key which does nothing, e.g. an arrow key.
• BAC now believes that it needs to fetch again, which of course is not true.

Solution: Keep record of active ajax calls' query strings, preferrably in a flat array. Then never fetch when active query.

Change charLimit for local queries from 1 to 2

This was emailed to me by James Butler, but I'll put it here so everyone can see it.

I changed some code for better performance on my site:
jquery.better-autocomplete.js Line 175:
175: charLimit: isLocal ? 1 : 3,
=>
175: charLimit: isLocal ? 2 : 3,
because a one character lookahead in an array of > 2,000 elements made a long delay, even local.
2 character lookahead is much, much faster.

Allow grouping in arbitrary order

Currently the group property of the result objects must come in homogenous order i.e. that first there are results belonging to group 1, then group 2 etc in the results array. It should be able to use any order.

Accessibility Issue | Screen Reader not reading the drop down options

Canonical query callback

The developer should be able to control whether some search strings should be considered the same. For example, most developers will not care about leading and trailing whitespace. To ease up on server requests, these strings could be treated the same. Another example would be when the query is case insensitive. Another example is when users are searching for e.g. phone numbers and everything except for digits should be ignored.

This is such an important feature that I want it shipped with the initial release!

Default behavior: use jQuery.trim() and possibly String.toLowerCase().

Feature reqest : Add a callback in redraw.

There would be good with a callback executed after the result element is .show() and .hide().

I.E

 // Finally show/hide based on focus and emptiness
    if (($input.is(':focus') || focus) && !$results.is(':empty')) {
      $results.filter(':hidden').show() // Show if hidden
        .scrollTop($results.data('scroll-top')); // Reset the lost scrolling
        AFTERSHOW CALLBACK HERE
    }
    else if ($results.is(':visible')) {
      // Store the scrolling position for later
      $results.data('scroll-top', $results.scrollTop())
        .hide(); // Hiding it resets it's scrollTop
        AFTERHIDE CALLBACK HERE
    }

array.indexOf is unsupported by IE7-8

There is a simple way to deal with this.

We can just add that method with prototype.

  if (!Array.indexOf){
    Array.prototype.indexOf = function(obj) {
    for (var i = 0; i < this.length; i++) {
      if (this[i]==obj) {
        return i;
      }
    }
    return -1;
    }
  };

IE: Cross domain requests

Cross domain requests has really been a hassle. Now I think I've found the solution. Since JSON and cross domain requests behave really strange on IE, I've now 1. added an option "crossOrigin" to BAC and 2. if this option is enabled and jQuery.support.cors is false (like in IE) then switch transfer method to JSONP instead. This works great with example.html on both local and remote resources. The discussion started in #10 btw...

Add getGroup callback

This callback should take a result and return the group content. This makes most sense I think. Defaults to result.group, if defined.

Pressing [Return/Enter] on selection doesn't populate the text box

When trying to pick a suggestion from the dropdown menu, pressing the [Return/Enter] key
does not populate the text box. This issue has been observed on:

• Firefox Nightly 7.0a1 (2011-06-26)
• Chromium 14.0.802.0 (90236)
• Chrome 14.0.803.0 canary
• Chrome 14.0.797.0 dev
• Webkit Nightly Safari Version 5.0.5 (6533.21.1, r89772)
• Opera Next 11.50
• Opera Swordfish RC 4
• Camino Version 2.1a2pre (1.9.2.18pre 20110520001916)

All of these are running on Mac OS X 10.6.8

It doesn't work on ie7

This plugin it is not working on ie7, it loads correctly but never shows the autocomplete content results. I tried directly on the site examples.

IE: window.open not working

IE dont like when the window name in window.open have spaces.

EDIT: This is in the example.html file, so its not "BAC-core"

selectkey and autoHighlight bug

Using autocomplete with

• selectKeys : [13],
• autoHighlight: false

gives me the bug that I cannot use Enter to select the raw unhighlighted input.

// A select key has been pressed
    else if ($.inArray(event.keyCode, options.selectKeys) >= 0 &&
             !event.shiftKey && !event.ctrlKey && !event.altKey &&
             !event.metaKey) {
      select();
     return event.keyCode == 9; // Never cancel tab
    }

If I change the return keyCode to 13 or just comment the return line away it works the way I expect it too.

/** edit **/
After working on it a bit this is the solution i came up with, can probably be done alot better, but it seems to work.

      // A select key has been pressed
      else if ($.inArray(event.keyCode, options.selectKeys) >= 0 &&
              !event.shiftKey && !event.ctrlKey && !event.altKey &&
              !event.metaKey) {
        // With autoHighlight off and only Enter key as selectvalue this gives us a bug
        // This if -> else fixes it.
        if (index == -1 && (event.keyCode).inArray(options.selectKeys)) {
          select();
        }
        else {
          select();
          return event.keyCode == 9; // Never cancel tab
        }
      }