Groups > comp.lang.javascript > #32785 > unrolled thread

Alternative and fast option to some very useful jQuery features?

Started by	justaguy <lichunshen84@gmail.com>
First post	2017-03-16 18:09 -0700
Last post	2017-03-19 17:39 +0800
Articles	20 on this page of 25 — 7 participants

Back to article view | Back to comp.lang.javascript

Page 1 of 2 [1] 2 Next page →

#32785 — Alternative and fast option to some very useful jQuery features?

From	justaguy <lichunshen84@gmail.com>
Date	2017-03-16 18:09 -0700
Subject	Alternative and fast option to some very useful jQuery features?
Message-ID	<c2c625c3-edf6-440a-8460-73d8e3d5c287@googlegroups.com>

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.

[toc] | [next] | [standalone]

#32786

From	jonas.thornvall@gmail.com
Date	2017-03-17 01:27 -0700
Message-ID	<bf5caad4-64c6-4579-a533-6b988ec4ebc3@googlegroups.com>
In reply to	#32785

Den fredag 17 mars 2017 kl. 02:09:31 UTC+1 skrev 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.

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

[toc] | [prev] | [next] | [standalone]

#32788

From	jonas.thornvall@gmail.com
Date	2017-03-17 01:48 -0700
Message-ID	<d336fff6-92f5-4fba-8abc-6b68489edd98@googlegroups.com>
In reply to	#32786

Den fredag 17 mars 2017 kl. 09:27:47 UTC+1 skrev jonas.t...@gmail.com:
> Den fredag 17 mars 2017 kl. 02:09:31 UTC+1 skrev 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.
> 
> You must have a linked array with a dictionary.
> http://anybase.co.nf/

Evidently from JJ's example sorted was enough.

[toc] | [prev] | [next] | [standalone]

#32787

From	JJ <jj4public@vfemail.net>
Date	2017-03-17 15:29 +0700
Message-ID	<1sjczmvvdmxsc$.y9d7gtnznjih.dlg@40tude.net>
In reply to	#32785

On Thu, 16 Mar 2017 18:09:26 -0700 (PDT), justaguy wrote:
> 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.

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

[toc] | [prev] | [next] | [standalone]

#32792

From	Thomas 'PointedEars' Lahn <PointedEars@web.de>
Date	2017-03-17 14:00 +0100
Message-ID	<1774790.oMNUckLgyt@PointedEars.de>
In reply to	#32787

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.

[toc] | [prev] | [next] | [standalone]

#32813

From	justaguy <lichunshen84@gmail.com>
Date	2017-03-18 21:27 -0700
Message-ID	<dede6518-029d-4574-b4ff-07e270cb0545@googlegroups.com>
In reply to	#32792

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.

[toc] | [prev] | [next] | [standalone]

#32810

From	justaguy <lichunshen84@gmail.com>
Date	2017-03-18 21:03 -0700
Message-ID	<d98c326b-c8a9-4565-84e8-c90608368726@googlegroups.com>
In reply to	#32787

On Friday, March 17, 2017 at 4:29:15 AM UTC-4, JJ wrote:
> On Thu, 16 Mar 2017 18:09:26 -0700 (PDT), justaguy wrote:
> > 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.
> 
> 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

Interesting technique, thanks.

[toc] | [prev] | [next] | [standalone]

#32790

From	Ben Bacarisse <ben.usenet@bsb.me.uk>
Date	2017-03-17 11:29 +0000
Message-ID	<87h92srvjd.fsf@bsb.me.uk>
In reply to	#32785

justaguy <lichunshen84@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.

[toc] | [prev] | [next] | [standalone]

#32811

From	justaguy <lichunshen84@gmail.com>
Date	2017-03-18 21:25 -0700
Message-ID	<6e364c21-1307-449c-afe1-6c5de62763c6@googlegroups.com>
In reply to	#32790

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

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.

[toc] | [prev] | [next] | [standalone]

#32814

From	justaguy <lichunshen84@gmail.com>
Date	2017-03-18 21:32 -0700
Message-ID	<08927503-fc48-4ab2-835f-21a1d0904e9b@googlegroups.com>
In reply to	#32811

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

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

[toc] | [prev] | [next] | [standalone]

#32816

From	Ben Bacarisse <ben.usenet@bsb.me.uk>
Date	2017-03-19 10:53 +0000
Message-ID	<87h92psfkr.fsf@bsb.me.uk>
In reply to	#32814

justaguy <lichunshen84@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.

[toc] | [prev] | [next] | [standalone]

#32817

From	justaguy <lichunshen84@gmail.com>
Date	2017-03-19 18:13 -0700
Message-ID	<35c1b73b-2b45-43de-a360-2a76e36f1093@googlegroups.com>
In reply to	#32816

On Sunday, March 19, 2017 at 6:53:34 AM UTC-4, Ben Bacarisse wrote:
> justaguy  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.

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.

[toc] | [prev] | [next] | [standalone]

#32818

From	justaguy <lichunshen84@gmail.com>
Date	2017-03-19 18:49 -0700
Message-ID	<b1217b03-6f5f-4bde-a5a0-614f7d6117a4@googlegroups.com>
In reply to	#32816

On Sunday, March 19, 2017 at 6:53:34 AM UTC-4, Ben Bacarisse wrote:
> justaguy 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.

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.

[toc] | [prev] | [next] | [standalone]

#32821

From	"Evertjan." <exxjxw.hannivoort@inter.nl.net>
Date	2017-03-20 11:03 +0100
Message-ID	<XnsA73E706C34B5Ceejj99@194.109.6.166>
In reply to	#32818

justaguy <lichunshen84@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)

[toc] | [prev] | [next] | [standalone]

#32831

From	justaguy <lichunshen84@gmail.com>
Date	2017-03-21 20:16 -0700
Message-ID	<07e760a7-1b58-45ab-ab46-7850e104a425@googlegroups.com>
In reply to	#32821

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?

[toc] | [prev] | [next] | [standalone]

#32833

From	"Evertjan." <exxjxw.hannivoort@inter.nl.net>
Date	2017-03-22 09:12 +0100
Message-ID	<XnsA7405DAEEE4E8eejj99@194.109.6.166>
In reply to	#32831

justaguy <lichunshen84@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.

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

[toc] | [prev] | [next] | [standalone]

#32841

From	justaguy <lichunshen84@gmail.com>
Date	2017-03-23 15:51 -0700
Message-ID	<75fb3301-67c0-4c7a-ae12-4af3220526d8@googlegroups.com>
In reply to	#32833

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.

[toc] | [prev] | [next] | [standalone]

#32843

From	"Evertjan." <exxjxw.hannivoort@inter.nl.net>
Date	2017-03-24 09:15 +0100
Message-ID	<XnsA7425E27DF2ABeejj99@194.109.6.166>
In reply to	#32841

justaguy <lichunshen84@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.

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

[toc] | [prev] | [next] | [standalone]

#32822

From	Ben Bacarisse <ben.usenet@bsb.me.uk>
Date	2017-03-20 10:41 +0000
Message-ID	<878to0qlgx.fsf@bsb.me.uk>
In reply to	#32818

justaguy <lichunshen84@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.

[toc] | [prev] | [next] | [standalone]

#32824

From	justaguy <lichunshen84@gmail.com>
Date	2017-03-20 17:23 -0700
Message-ID	<40b0b1df-ba67-4f60-aed4-b66aa822dbe8@googlegroups.com>
In reply to	#32822

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.

[toc] | [prev] | [next] | [standalone]

Page 1 of 2 [1] 2 Next page →

csiph-web

Alternative and fast option to some very useful jQuery features?

Contents

#32785 — Alternative and fast option to some very useful jQuery features?

#32786

#32788

#32787

#32792

#32813

#32810

#32790

#32811

#32814

#32816

#32817

#32818

#32821

#32831

#32833

#32841

#32843

#32822

#32824