jQuery Forum

http://www.vulgarisoip.com/2007/06/29/jquerysuggest-an-alternative-jquery-based-autocomplete-library/
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.

Instead of using one array of csv data, why not use nested arrays?

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-jquery-based-autocomplete-library/
> 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 <gordon.mc...@ntlworld.com>

Gordon schrieb:

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.

I've got a matching function that does what I want. It splits the
input into an array and then checks each word against each string.
Only strings that include all the words will be included in the
dropdown, but the order ceases to be important.

$(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.

I noted the speed for ie6 is veeeeeeeeery slow, but for FF is very good =p

That's odd, with my 150 items test list I found it didn't seem
unreasonably slow in IE, though I didn't test in 6. In the end I had
to rewrite the code without the support of jQuery because I couldn't
figure out how to get fValidate to play nicely with it, and that
version runs well in IE6.
Here's the non-jQuery code if you're interested.
try
{
    // Standards compliant method of capturing mouse
    window.addEventListener ('load', addrSearchSetUp, false);
}
catch (e)
{
    try
    {
        // Internet Explorer method of capturing mouse
        window.attachEvent ('onload', addrSearchSetUp);
    }
    catch (e) {throw (e);}
}
function getInnerText(elt) {
    var _innerText = elt.innerText;
    if (_innerText == undefined) {
        _innerText = elt.innerHTML.replace(/<[^>]+>/g,"");
    }
    return _innerText;
}
function addrSearchSetUp ()
{
    // Because fValidate seems to screw up jQuery DOM element insersion
we'll have to do it the hard way
    var scroller            = document.getElementById ('scroller');
    var addrListItem        = document.getElementById ('storedAddresses');
    var searchBox            = document.createElement ('input');
    var label                = document.createElement ('label');
    var matchErr            = document.createElement ('li');
    var clear                = document.createElement ('div');
    var addrList            = addrListItem.getElementsByTagName ('li');
    var addrStrings            = [];
    searchBox.id            = 'addrSearch';
    //searchBox.name            = 'addrSearch';
    searchBox.type            = 'text';
    label.id                = 'addrLabel';
    label.htmlFor            = 'addrSearch';
    label.appendChild (document.createTextNode ('Search your
addresses'));
    clear.className            = "clr";
    clear.appendChild (document.createTextNode ('&nbsp;'));
    matchErr.className        = 'noMatch';
    matchErr.style.display    = 'none';
    matchErr.appendChild (document.createTextNode ('Sorry, none of the
addresses we have on record matched your search terms'));
    scroller.parentNode.insertBefore (clear, scroller.nextSibling);
    scroller.parentNode.insertBefore (searchBox, scroller.nextSibling);
    scroller.parentNode.insertBefore (label, scroller.nextSibling);
    //Cache the contents of the list items
    for (var thisItem = 0; thisItem < addrList.length; thisItem++)
    {
        addrStrings.push (getInnerText (addrList [thisItem]).toLowerCase
());
    }
    addrListItem.appendChild (matchErr);
    document.getElementById ('addressPicker').onsubmit    = function ()
    {
        return (false);
    };
    searchBox.onkeyup    = function ()
    {
        var unmatched    = false;
        var matchCount    = addrStrings.length;
        // 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 (' ');
        // Run through the list of addresses
        for (var thisItem = 0; thisItem < addrStrings.length; thisItem++)
        {
            // Run through the list of search terms
            for (var thisSearch = 0; thisSearch < searches.length; thisSearch+
+)
            {
                if (addrStrings [thisItem].match (searches [thisSearch]) === null)
                {
                    // A search term couldn't be found in this address
                    addrList [thisItem].style.display    = 'none';
                    unmatched    = true;
                    matchCount--;
                    break;
                }
            }
            if (unmatched)
            {
                unmatched    = false;
            }
            else
            {
                addrList [thisItem].style.display    = '';
            }
        }
        matchErr.style.display    = matchCount > 0? 'none' : '';
    };
}