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 (' '));
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' : '';
};
}
On Nov 20, 7:40 pm, Jean <[EMAIL PROTECTED]> wrote:
> I noted the speed for ie6 is veeeeeeeeery slow, but for FF is very good =p
>
> On Nov 20, 2007 7:37 AM, Gordon <[EMAIL PROTECTED]> wrote:
>
>
>
>
>
> > $(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.
>
> --
>
> []´s Jeanwww.suissa.info
>
> Ethereal Agencywww.etherealagency.com
