$(document).ready (function ()
{
        var searchBox   = $('<input type="text" name="addrSearch"
id="addrSearch" />');
        var addrList    = $('#storedAddresses li');
        var matchErr    = $('<li class="noMatch">No matches found</li>');
        var addrStrings = [];

        // Cache the contents of each list item
        addrList.each (function ()
        {
                addrStrings.push ($(this).text ().toLowerCase ());
        });

        //console.log (addrStrings);

        $('#storedAddresses').append (matchErr);
        matchErr.hide ();
        $('#scroller').before (searchBox);
        searchBox.keyup (function ()
        {
                // Convert input value to lower case, strip non-alphanumeric
characters, strip multiple white space and split into an array of
search terms
                var searches = this.value.toLowerCase ().replace (/[^a-z0-9 
]/g, '
').replace (/\s+/g, ' ').split (' ');
                // Match elements against the supplied list of search words
                var elemsToShow = addrList.filter (function (index)
                {
                        for (var thisSearch     = 0; thisSearch < 
searches.length; thisSearch+
+)
                        {
                                if (addrStrings [index].match (searches 
[thisSearch]) === null)
                                {
                                        return (false);
                                }
                        }
                        return (true);
                });
                // Show matches, hide non-matches
                var elemsToHide = addrList.not (elemsToShow);
                elemsToHide.hide ();
                elemsToShow.show ();
                // If the search resulted in 0 matches then display an error 
message
                elemsToShow.length > 0? matchErr.hide () : matchErr.show ();
        });
});

#storedAddresses is a HTML list of stored delivery addresses.

#scroller is of no significance to the script and is simply a point in
the DOM into which the search text box can be inserted.

I was worried about speed, as the main loop does quite a lot of work,
but it seems to remain responsive even with around 150 addresses in
the address list.  It also provides the behaviour I want, all the
typed words have to be in the address for a match, but the order of
the words in the search box is unimportant.

On Nov 19, 9:54 pm, Gordon <[EMAIL PROTECTED]> wrote:
> Thanks for the suggestion, but it came too late.  I've now already
> written something that seems to work pretty well.  Will post source
> later for comments and in the hopes someone else will find it useful.
>
> On Nov 19, 6:49 pm, Sean O <[EMAIL PROTECTED]> wrote:
>
> > Gordon,
>
> > I think the quickSearch plugin:http://rikrikrik.com/jquery/quicksearch/
>
> > will help you.
>
> > SEAN O
> > ______________www.sean=o.com
>
> > Gordon-35 wrote:
>
> > >http://www.vulgarisoip.com/2007/06/29/jquerysuggest-an-alternative-jq...
> > > demonstrates a plugin that's really close to what I want, it will pick
> > > up on elements where the word entered isn't the first word in the
> > > strings being searched.  Unfortunately, it still requires all the
> > > words to be in the order they appear in the strings and doesn't seem
> > > to match when words are ommited.  Try "eastern", "warbler" and
> > > "eastern warbler" to see what I mean.  If this plugin matched on
> > > "eastern warbler" or even on "warbler eastern" it would be pretty much
> > > just what I needed functionality wise.  Additionally it doesn't need
> > > any ajax support as the UL with all the addresses in it is already on
> > > the page.  I just need to process that list, and use it as the basis
> > > of the autocomplete.
>
> > > On Nov 19, 10:16 am, Gordon <[EMAIL PROTECTED]> wrote:
> > >> I currently have a brief to develop a system to help people find
> > >> addresses in a list loaded into a web page.  At the moment they're
> > >> displayed as a single long list (a ul), and the oser clicks the one he
> > >> wants to use.  The problem is that in some cases this list can run to
> > >> hundreds of entries.
>
> > >> The first plan was to simply have a button to click on the page that
> > >> invokes the browser's ctrl-f behaviour, but there doesn't seem to be a
> > >> sensible cross-browser way to do it.
>
> > >> My second idea was to use jQuery and one of the autocomplete plugins,
> > >> convert the list into the data the autocomplete plugin needs to
> > >> operate on and suggest addresses as users type into the field.  This
> > >> seemed a better approach but then I hit a problem that the
> > >> autocomplete plugins that I've found so far all seem to search on
> > >> exact phrases, which is not going to be very useful.  Addresses in the
> > >> list are in the format <recipient name>, <address>, <postcode> so a
> > >> user would have to start by entering the name of the recipient
> > >> followed by the address and post code for the autocomplete to work.
> > >> If the user was to start with a postcode or street address, as most
> > >> users would probably consider sensible, then the autocomplete would
> > >> return no results.
>
> > >> What I really need is something that works in a similar manner to the
> > >> autocomplete plugins I've found so far, but that doesn't care about
> > >> the order of the words typed into the search box.  The only constraint
> > >> should be that the strings being matched against contain all the words
> > >> typed.
>
> > >> For example, if an address is listed as "Mister Foobar, 123 Fake
> > >> street, Quuxville, AS1 23D, then the autocomplete plugin would suggest
> > >> that address if the user typed in "fake street as1", or "fake
> > >> foobar".  Are there any autocumplete plugins that support doing this?
>
> > --
> > View this message in 
> > context:http://www.nabble.com/Autosuggest-tf4835224s27240.html#a13842444
> > Sent from the jQuery General Discussion mailing list archive at Nabble.com.

Reply via email to