Alternative and fast option to some very useful jQuery features?

[justaguy]

Hi,

jQuery is neat but I find its overhead sometime is a bit too much. For instance, for one page, I need to use jQuery's autosuggest feature, and for this feature only but I have to load first jQuery main library, sure, no problem, but then I still need to load four more jQuery UI files. All this adds up the loading files size to 12k while my page itself has only 239 lines.
Though my loading speed is still acceptable it would be awesome if we have some sort of alternative and light/short code to perform just that.

For those who have not used jQuery autosuggest, what it does is, to pull up a list of items/values instantly upon user input of a few letters of a word or term in the INPUT box (of type text). For instance, say, I start to type "Mo" it would pull up "Money", "Monkey", "Month" etc. to let the user to choose from.

Doable? With pure JS, how do we go about doing this?

Thanks.

[jonas.t...@gmail.com]

You must have a linked array with a dictionary.
http://anybase.co.nf/

[JJ]

AFAIK, JQuery's autocomplete would treat multiple words in the input as
multiple search query. Below is an example using simple substring match
where it treats multiple words as a single search query. This should give
you the general idea.

Assuming that we have this list of strings.

var list = [
'abc def', 'ghi', 'def xyz', 'jkl mno', 'xyz ghi'
];

And assuming that `element` variable holds the reference to the text input
element object, each time the input changes, we do like below.

//trim the input
var input = element.value.trim();
//regex-escape the input. note: incomplete
rxstr = input.replace(/[\\[(]/g, function(c) {
if (c === "\\") {
return "\\\\"
} else return "\\" + c;
});
//create regex
var rx = new RegExp(rxstr);
//find matches
var matches = list.reduce(function(prev, cur) {
if (rx.test(cur)) prev.push(cur);
return prev;
}, []);
//matches is an array of strings. empty if none matched

[jonas.t...@gmail.com]

Evidently from JJ's example sorted was enough.

[Ben Bacarisse]

justaguy <lichun...@gmail.com> writes:

> ... for one page, I need to use jQuery's autosuggest feature, and for
> this feature only
<snip>

> For those who have not used jQuery autosuggest, what it does is, to
> pull up a list of items/values instantly upon user input of a few
> letters of a word or term in the INPUT box (of type text). For
> instance, say, I start to type "Mo" it would pull up "Money",
> "Monkey", "Month" etc. to let the user to choose from.
>
> Doable? With pure JS, how do we go about doing this?

Sure, but exactly how will depend on where there list comes from and
exactly what sort of matching you want to do. It's harder if the
suggestions have to come live via HTTP requests.

With HTML5 capable browsers, you can do something very similar simply by
using the "list" attribute, but that may not suit your needs.

--
Ben.

[Richard Maher]

On 17-Mar-17 9:09 AM, justaguy wrote:
> Hi,
>
> jQuery is neat

No it's not! Now I have to learn React for some reason after the fads of
Angular, bootstrap, et al :-(

>
> Doable? With pure JS, how do we go about doing this?
>

I do it this way: -

/**
* Copyright (c) Richard Maher. All rights reserved.
*
* Generic predictive text utility for Text and Select elements.
*/
function Tier3Suggest(
targetElement,
lovDetent,
divClass,
selClass,
maxRows,
dataFetch,
singleton)
{
var lovTarget = targetElement;

if (arguments.length < 7)
throw new Error("Insufficient arguments for Tier3Suggest");

if (!lovTarget.id)
throw new Error('"id" attribute must be defined for element');

if (Tier3Suggest.LOV[lovTarget.id])
throw new Error("A list of values is already defined for this
element");

var lovDetent = lovDetent || 0;
var stagger = null;
var currVintage = 0;
var lastSearch = "";
var lastSelected = -1;
var dataFetch = dataFetch;
var singleton = singleton;
var lovMax = maxRows || 10;
var targetStyle = getStyle(targetElement);
var selClass = selClass || "";

var targetDiv = document.createElement("div");
targetDiv.className = divClass || lovTarget.className;
targetDiv.style.visibility = "hidden";
targetDiv.style.position = "absolute";
targetDiv.style.width = "auto";
targetDiv.style.height = "0px";
targetDiv.style.overflowY = "auto";
targetDiv.style.overflowX = "hidden";
targetDiv.style.padding = targetStyle.padding;
targetDiv.style.whiteSpace = "nowrap";

var dimTarget = lovTarget;
var offsetTop = dimTarget.offsetTop + dimTarget.offsetHeight;
var offsetLeft = dimTarget.offsetLeft;

while(dimTarget = dimTarget.offsetParent){
offsetTop += dimTarget.offsetTop;
offsetLeft += dimTarget.offsetLeft;
}

targetDiv.style.top = offsetTop + "px";
targetDiv.style.left = offsetLeft + "px";

document.body.appendChild(targetDiv);
var divStyle = getStyle(targetDiv);

var suggestList = document.createElement("ul");
suggestList.style.padding = "0px";
suggestList.style.margin = "0px";
suggestList.style.listStyleType
= "none";

var getLOV =
function()
{
var lovVintage = ++currVintage;
var rowCnt = 0;
targetDiv.style.height = "0px";
targetDiv.style.visibility = "hidden";
return function(rowKey, rowData)
{
if (lovVintage != currVintage)
return;

var listItem = document.createElement("li");
var listData = document.createTextNode(rowData.rTrim());

listItem.appendChild(listData);
listItem._key = rowKey;

suggestList.appendChild(listItem);
rowCnt++;

if (rowCnt == 1) {
targetDiv.style.height = "auto";
targetDiv.style.visibility = "visible";
}

if (rowCnt == lovMax)
targetDiv.style.height = targetDiv.clientHeight +
"px";

if (targetDiv.clientWidth < targetDiv.scrollWidth)
targetDiv.style.width = (targetDiv.scrollWidth
+ (targetDiv.scrollWidth -
targetDiv.clientWidth)) + "px";
}
}

var clickHandler =
function(evt)
{
var lclTarget = evt.target || evt.srcElement;

if (lclTarget.tagName.toLowerCase() == "option")
lclTarget = lclTarget.parentNode;

if (lclTarget.tagName.toLowerCase() != "select")
return;

if (lclTarget.selectedIndex == lastSelected) {
lclTarget.selectedIndex = -1;
lastSelected = -1;
targetDiv.style.height = "0px";
targetDiv.style.visibility="hidden";
return;
}

lastSelected = lovTarget.selectedIndex;

newLOV();
}

var keyHandler =
function()
{
if (falseAlarm())
return;

if (stagger)
clearTimeout(stagger);

stagger = setTimeout(newKey, lovDetent);
};

function newKey()
{
stagger = null;

if (falseAlarm())
return;

lastSearch = lovTarget.value;

newLOV();
}

function falseAlarm()
{
if (lovTarget.value == lastSearch &&
targetDiv.style.visibility == "visible")
return true;

if (lovTarget.value.length == 0) {
targetDiv.style.height = "0px";
targetDiv.style.visibility="hidden";
lastSearch = "";
return true;
}

return false;
}

function newLOV()
{
targetDiv.style.height = "auto";
targetDiv.style.width = "auto";

while (suggestList.lastChild) {
suggestList.removeChild(suggestList.lastChild);
}

rowCallback = getLOV();
dataFetch.call(this, lovTarget, rowCallback);

};

var listHandler =
function(evt) {
var lclTarget = evt.target || evt.srcElement;
if (lclTarget.nodeType == 3)
lcltarget = lclTarget.parentNode;

if (lclTarget.tagName.toLowerCase() == "li") {
if (evt.type == "mouseover") {
if (selClass != "") {
lclTarget.className = selClass;
}else{
lclTarget.style.color = divStyle.backgroundColor;
lclTarget.style.backgroundColor = divStyle.color;
}
}
if (evt.type == "mouseout") {
if (selClass != "") {
lclTarget.className = "";
}else{
lclTarget.style.color = "";
lclTarget.style.backgroundColor = "";
}
}
if (evt.type == "click") {
singleton.call(this, lovTarget, lclTarget._key,
lclTarget.firstChild.nodeValue);
lovTarget.focus();
if (lovTarget.type.toLowerCase() == "text")
lovTarget.value = lovTarget.value;
}
}
}

var hideLOV =
function(e) {
var evt = e || window.event;
var lclTarget = evt.target || evt.srcElement;
if (lclTarget.nodeType != 1)
return;

if (lclTarget != lovTarget &&
lclTarget != targetDiv &&
targetDiv.style.visibility == "visible") {
targetDiv.style.height = "0px";
targetDiv.style.visibility = "hidden";
currVintage++;
resetCriteria();
}
}

listenerRegistry.checkIn(suggestList,"mouseover",listHandler);
listenerRegistry.checkIn(suggestList,"mouseout", listHandler);
listenerRegistry.checkIn(suggestList,"click", listHandler);

if (window.addEventListener) {
document.addEventListener("focus", hideLOV, true);
} else {
if (!document.attachEvent('onfocusin', hideLOV))
throw new Error("Unable to focusin listener");
}

switch (lovTarget.type.toLowerCase())
{
case "text":
listenerRegistry.checkIn(lovTarget,"keyup",keyHandler);
var resetCriteria =
function() {
lovTarget.value = "";
lastSearch = "";
}
break;
case "select-one":
listenerRegistry.checkIn(lovTarget,"click",clickHandler);
var resetCriteria =
function() {
lovTarget.selectedIndex = -1;
lastSelected = -1;
}
break;
default:
throw new Error("Unsupported field type for LOV");
}

targetDiv.appendChild(suggestList);

Tier3Suggest.LOV[lovTarget.id] = this;

return this;
}

Tier3Suggest.LOV = {};

[Thomas 'PointedEars' Lahn]

JJ wrote:

> AFAIK, JQuery's autocomplete

It is not jQuery’s autocomplete (or "autosuggest"), but jQuery UI’s
autocomplete widget.

> would treat multiple words in the input as multiple search query.

How did you get that idea?

--
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

[justaguy]

Interesting technique, thanks.

[justaguy]

On Friday, March 17, 2017 at 7:29:32 AM UTC-4, Ben Bacarisse wrote:

Good to know. And say we have the following HTML5 list code:
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
How do we reference the selected data option?
I attempted to look at the values of id of "browser" and of "browsers" in vain,
considering datalist as select, thus, we have options and selectedIndex etc is also getting no where.

Thanks.

[justaguy]

Long. Thanks tho.

[justaguy]

On Friday, March 17, 2017 at 9:00:43 AM UTC-4, Thomas 'PointedEars' Lahn wrote:
> JJ wrote:
>
> > AFAIK, JQuery's autocomplete
>
> It is not jQuery’s autocomplete (or "autosuggest"), but jQuery UI’s
> autocomplete widget.
>

You're correct, this is more accurate.

[justaguy]

Sorry, my bad.
document.getElementById('browser').value
would do.

[Richard Maher]

On 19-Mar-17 12:26 PM, justaguy wrote:
> On Friday, March 17, 2017 at 8:11:36 AM UTC-4, Richard Maher wrote:

>> Pearls

TL;DR :-(

>
> Long. Thanks tho.
>

Look forward to seeing your "solution" when you post it - sigh

[Ben Bacarisse]

justaguy <lichun...@gmail.com> writes:

> On Sunday, March 19, 2017 at 12:25:12 AM UTC-4, justaguy wrote:
>> On Friday, March 17, 2017 at 7:29:32 AM UTC-4, Ben Bacarisse wrote:
>> > justaguy writes:
>> >
>> > > ... for one page, I need to use jQuery's autosuggest feature, and for
>> > > this feature only
<snip>

>> > With HTML5 capable browsers, you can do something very similar simply by
>> > using the "list" attribute, but that may not suit your needs.
>> >
>>

>> Good to know. And say we have the following HTML5 list code:
>> <input list="browsers" name="browser" id="browser">
>> <datalist id="browsers">
>> <option value="Internet Explorer">
>> <option value="Firefox">
>> <option value="Chrome">
>> <option value="Opera">
>> <option value="Safari">
>> </datalist>
>> How do we reference the selected data option?
>> I attempted to look at the values of id of "browser" and of
>> "browsers" in vain, considering datalist as select, thus, we have
>> options and selectedIndex etc is also getting no where.
>>
>

> Sorry, my bad.
> document.getElementById('browser').value
> would do.

Sure, but the idea is that the browser will simply suggest possible
items from the list when the user types. Support for this is not
universal, of course.

--
Ben.

[justaguy]

True. My web app is not for the general public, so, we may have some luxury to require users to use one of two modern browsers, thus, this solution is feasible for us. Many thanks. Thought I've looked at HTML5 but somehow I missed the "list" attribute for INPUT.

[justaguy]

Quick update. I tried it with Chrome (ver 56) and Firefox (ver 52). And I pass the selected value to a js function for further process with Event of "onInput", both seems to work. So far Chrome hasn't crashed but FF just crashed. Fyi, it's not my js function's problem, several persons including myself has been testing it for about a week, browser never crashed.
It raised concern in me if HTML5 "list" INPUT attribute is ready for production... Thanks.

[Evertjan.]

justaguy <lichun...@gmail.com> wrote on 20 Mar 2017 in
comp.lang.javascript:

> Quick update. I tried it with Chrome (ver 56) and Firefox (ver 52).

<input list="browsers">
<datalist id="browsers">
<option value="Chrome">I prefer this one ultimately</option>
<option value="Firefox">
<option value="Edge">

<option value="Opera">
<option value="Safari">
</datalist>

In Chrome this gives a nice, though not logical and undocumented effect.

Try this in FF and on Edge and you know what illogical realy means.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[Ben Bacarisse]

justaguy <lichun...@gmail.com> writes:

> On Sunday, March 19, 2017 at 6:53:34 AM UTC-4, Ben Bacarisse wrote:

<snip>

>> Sure, but the idea is that the browser will simply suggest possible
>> items from the list when the user types. Support for this is not
>> universal, of course.
>

> Quick update. I tried it with Chrome (ver 56) and Firefox (ver 52).
> And I pass the selected value to a js function for further process
> with Event of "onInput", both seems to work. So far Chrome hasn't
> crashed but FF just crashed. Fyi, it's not my js function's problem,
> several persons including myself has been testing it for about a week,
> browser never crashed.

What does "crash" mean in this case?

> It raised concern in me if HTML5 "list" INPUT attribute is ready for
> production...

Does it go wrong when there are no scripts at all? If not, why do you
think it's the list attribute? If it does, have you filed a bug? This
would be a significant help to the community.

--
Ben.

[justaguy]

On Monday, March 20, 2017 at 6:41:24 AM UTC-4, Ben Bacarisse wrote:

> justaguy writes:
>
> > On Sunday, March 19, 2017 at 6:53:34 AM UTC-4, Ben Bacarisse wrote:
> <snip>
> >> Sure, but the idea is that the browser will simply suggest possible
> >> items from the list when the user types. Support for this is not
> >> universal, of course.
> >
> > Quick update. I tried it with Chrome (ver 56) and Firefox (ver 52).
> > And I pass the selected value to a js function for further process
> > with Event of "onInput", both seems to work. So far Chrome hasn't
> > crashed but FF just crashed. Fyi, it's not my js function's problem,
> > several persons including myself has been testing it for about a week,
> > browser never crashed.
>
> What does "crash" mean in this case?

Browser: FF (ver 52)
Err msg:
"
Gah. Your tab just crashed.

We can help you!

Choose Restore This Tab to reload page content.
...
"

Condition:
I changed the event from onInput to onSelect. I then changed it back, however, it still exhibited the same behavior (maybe because of cache).
Today, I changed it to onSelect, expectedly it crashed again, I changed it back to onInput but it did not crash this time.

>
> > It raised concern in me if HTML5 "list" INPUT attribute is ready for
> > production...
>
> Does it go wrong when there are no scripts at all?

Well. I have a few js functions. But as mentioned in my previous, these functions have been working perfectly fine for some time. Hence, they are not likely the culprit.

>If not, why do you
> think it's the list attribute? If it does, have you filed a bug? This
> would be a significant help to the community.

Do we still need to file a bug?


> --
> Ben.

[Ben Bacarisse]

I suspect that list attributes have worked perfectly for some time too
(I've used them a lot and not seen an issues so far) so this is not a
compelling argument. The reason to remove the scripts is to get the
smallest error case you can.

>>If not, why do you
>> think it's the list attribute? If it does, have you filed a bug? This
>> would be a significant help to the community.
> Do we still need to file a bug?

I'd argue that nothing should cause that message to appear so it's a bug
one way or another, but if it's due to using nothing but the list
attribute then it's a very important one.

If your test case involves a complex document with lots of scripts, it's
going to take much more effort to track down than a small test case. It
would be helpful if you can gradually reduce the complexity of the
document until you get as small a test case as you can that still
triggers the crash. I know this is non-trivial, but it helps everyone.

--
Ben.

[justaguy]

Here's my program flow in regard to the INPUT element select.
(1) Produce a list of values via jQuery UI autocomplete or HTML5 "List" attribute.
(2) Upon select of an element pass the element to a JavaScript function to take next step.

And here's my observation about use experience, the jQuery seems to provide better user experience whereas HTML5 "List" seems a bit clumsy or was it because I'm new to it and this kind of nascence creates some strange feel about it?

Cheers

[justaguy]

On Monday, March 20, 2017 at 6:03:31 AM UTC-4, Evertjan. wrote:
> justaguy wrote on 20 Mar 2017 in

> comp.lang.javascript:
>
> > Quick update. I tried it with Chrome (ver 56) and Firefox (ver 52).
>
>
> <input list="browsers">
> <datalist id="browsers">
> <option value="Chrome">I prefer this one ultimately</option>
> <option value="Firefox">
> <option value="Edge">
> <option value="Opera">
> <option value="Safari">
> </datalist>
>
> In Chrome this gives a nice, though not logical and undocumented effect.
>
> Try this in FF and on Edge and you know what illogical realy means.
>

"In Chrome this gives a nice, though not logical and undocumented effect."

What exactly do you mean by that?
Do you expect HTML5 "List" attribute to behave exactly like jQuery UI autocomplete?

[Evertjan.]

justaguy <lichun...@gmail.com> wrote on 22 Mar 2017 in
comp.lang.javascript:

> On Monday, March 20, 2017 at 6:03:31 AM UTC-4, Evertjan. wrote:
>> justaguy wrote on 20 Mar 2017 in
>> comp.lang.javascript:
>>
>> > Quick update. I tried it with Chrome (ver 56) and Firefox (ver 52).
>>
>>
>> <input list="browsers">
>> <datalist id="browsers">
>> <option value="Chrome">I prefer this one ultimately</option>
>> <option value="Firefox">
>> <option value="Edge">
>> <option value="Opera">
>> <option value="Safari">
>> </datalist>
>>
>> In Chrome this gives a nice, though not logical and undocumented
>> effect.
>>
>> Try this in FF and on Edge and you know what illogical realy means.
>>
>
> "In Chrome this gives a nice, though not logical and undocumented
> effect." What exactly do you mean by that?

Did you try it out on the browsers named?

> Do you expect HTML5 "List" attribute to behave exactly like jQuery UI
> autocomplete?

I do not expect anything to behave like jquery, as I think using jquery,
which certainly is NOT an UI, is a mistake by itself, like using a boeing
707 to visit your next door neighbour, even disregarding the possible lack
of innercity parking space.

[justaguy]

On Wednesday, March 22, 2017 at 4:12:36 AM UTC-4, Evertjan. wrote:
> justaguy wrote on 22 Mar 2017 in

> comp.lang.javascript:
>
> > On Monday, March 20, 2017 at 6:03:31 AM UTC-4, Evertjan. wrote:
> >> justaguy wrote on 20 Mar 2017 in
> >> comp.lang.javascript:
> >>
> >> > Quick update. I tried it with Chrome (ver 56) and Firefox (ver 52).
> >>
> >>
> >> <input list="browsers">
> >> <datalist id="browsers">
> >> <option value="Chrome">I prefer this one ultimately</option>
> >> <option value="Firefox">
> >> <option value="Edge">
> >> <option value="Opera">
> >> <option value="Safari">
> >> </datalist>
> >>
> >> In Chrome this gives a nice, though not logical and undocumented
> >> effect.
> >>
> >> Try this in FF and on Edge and you know what illogical realy means.
> >>
> >
> > "In Chrome this gives a nice, though not logical and undocumented
> > effect." What exactly do you mean by that?
>
> Did you try it out on the browsers named?

Yes, Chrome (ver 56), Firefox (ver 52) and IE 11
Weird tho, for just 11 lines of straight HTML code albeit HTML5, rendering seems pains-taking for each browser compared to jQuery autocomplete. Which translates to poor use experience, let alone logic.

Does it mean that HTML5 "List" attribute is "buried" deep in a deep DOM layer?

>
> > Do you expect HTML5 "List" attribute to behave exactly like jQuery UI
> > autocomplete?
>
> I do not expect anything to behave like jquery, as I think using jquery,
> which certainly is NOT an UI, is a mistake by itself, like using a boeing
> 707 to visit your next door neighbour, even disregarding the possible lack
> of innercity parking space.
>

Supposed you have the same need, how do you solve this problem then?
I take it you won't use jQuery autocomplete for this nor HTML5.

[Evertjan.]

justaguy <lichun...@gmail.com> wrote on 23 Mar 2017 in
comp.lang.javascript:

>> >> Try this in FF and on Edge and you know what illogical realy means.
>> >>
>> >
>> > "In Chrome this gives a nice, though not logical and undocumented
>> > effect." What exactly do you mean by that?
>>
>> Did you try it out on the browsers named?
> Yes, Chrome (ver 56), Firefox (ver 52) and IE 11
> Weird tho, for just 11 lines of straight HTML code albeit HTML5,
> rendering seems pains-taking for each browser compared to jQuery
> autocomplete. Which translates to poor use experience, let alone logic.
>
> Does it mean that HTML5 "List" attribute is "buried" deep in a deep DOM
> layer?

You are mixing html5 'specification' and 'implementation'.

Perhaps the 'specification' is not clear
to a specific 'implementation'-team.

The 'implementation' on different browsers differs in any case.

>> > Do you expect HTML5 "List" attribute to behave exactly like jQuery UI
>> > autocomplete?
>>
>> I do not expect anything to behave like jquery, as I think using
>> jquery, which certainly is NOT an UI, is a mistake by itself, like
>> using a boeing 707 to visit your next door neighbour, even disregarding
>> the possible lack of innercity parking space.
>>
> Supposed you have the same need,

Nonsense, what you declare to be your 'need' is just your 'desire'.

> how do you solve this problem then?

I 'would' not expect 'html5' to be a crossbrowser-ready application,
there are many more vague ideas/wishes for the human/DOM-interface,
that cannot be used yet or ever.

> I take it you won't use jQuery autocomplete for this nor HTML5.

I would build my own, learning from, and enjoying, the exercise, not having
to worry about an instrument that is far mor convoluted than a simple html5
bugginess, where I do not understand the inner complexity, while there are
better options.

I would perhaps use a dirty solution on a page thet is only for my primary
browser and only for own use and I can live with the crossbrowser
incompatibility then.

In the end autocomplete is just a gimmick, both making life seemingly easier
and introducing wrong/unintended choices by the unwary user.

But jQuery is bad for your mind as a programmer.