Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

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

jQuery and autosuggest and more

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

Contents

  jQuery and autosuggest and more justaguy <lichunshen84@gmail.com> - 2012-09-15 08:19 -0700
    Re: jQuery and autosuggest and more Gregor Kofler <usenet@gregorkofler.com> - 2012-09-15 20:02 +0200
      Re: jQuery and autosuggest and more justaguy <lichunshen84@gmail.com> - 2012-09-15 12:11 -0700
        Re: jQuery and autosuggest and more Gregor Kofler <usenet@gregorkofler.com> - 2012-09-15 23:38 +0200
          Re: jQuery and autosuggest and more justaguy <lichunshen84@gmail.com> - 2012-09-15 15:48 -0700
            Re: jQuery and autosuggest and more Gregor Kofler <usenet@gregorkofler.com> - 2012-09-16 23:15 +0200
    Re: jQuery and autosuggest and more "S.T." <anon@anon.com> - 2012-09-17 12:51 -0700
      Re: jQuery and autosuggest and more justaguy <lichunshen84@gmail.com> - 2012-09-17 14:42 -0700
        Re: jQuery and autosuggest and more "S.T." <anon@anon.com> - 2012-09-17 15:38 -0700
          Re: jQuery and autosuggest and more justaguy <lichunshen84@gmail.com> - 2012-09-17 16:31 -0700
            Re: jQuery and autosuggest and more "S.T." <anon@anon.com> - 2012-09-17 17:01 -0700
              Re: jQuery and autosuggest and more justaguy <lichunshen84@gmail.com> - 2012-09-17 17:58 -0700
                Re: jQuery and autosuggest and more justaguy <lichunshen84@gmail.com> - 2012-09-17 18:19 -0700
                  Re: jQuery and autosuggest and more justaguy <lichunshen84@gmail.com> - 2012-09-17 19:47 -0700
                    Re: jQuery and autosuggest and more "S.T." <anon@anon.com> - 2012-09-17 22:17 -0700
                      Re: jQuery and autosuggest and more David Mark <dmark.cinsoft@gmail.com> - 2012-09-17 22:32 -0700
                        Re: jQuery and autosuggest and more "S.T." <anon@anon.com> - 2012-09-17 23:22 -0700
                          Re: jQuery and autosuggest and more David Mark <dmark.cinsoft@gmail.com> - 2012-09-17 23:59 -0700
                        Re: jQuery and autosuggest and more David Mark <dmark.cinsoft@gmail.com> - 2012-09-18 02:08 -0700
                      Re: jQuery and autosuggest and more justaguy <lichunshen84@gmail.com> - 2012-09-18 05:46 -0700
                        Re: jQuery and autosuggest and more justaguy <lichunshen84@gmail.com> - 2012-09-18 07:50 -0700
                      Re: jQuery and autosuggest and more justaguy <lichunshen84@gmail.com> - 2012-09-18 08:07 -0700
                        Re: jQuery and autosuggest and more "S.T." <anon@anon.com> - 2012-09-18 12:03 -0700
                          Re: jQuery and autosuggest and more justaguy <lichunshen84@gmail.com> - 2012-09-18 12:58 -0700
                            Re: jQuery and autosuggest and more justaguy <lichunshen84@gmail.com> - 2012-09-18 13:42 -0700
                              Re: jQuery and autosuggest and more David Mark <dmark.cinsoft@gmail.com> - 2012-09-18 14:24 -0700
                                Re: jQuery and autosuggest and more "S.T." <anon@anon.com> - 2012-09-18 15:34 -0700
                                  Re: jQuery and autosuggest and more David Mark <dmark.cinsoft@gmail.com> - 2012-09-18 15:40 -0700
                                    Re: jQuery and autosuggest and more "S.T." <anon@anon.com> - 2012-09-19 09:30 -0700
                                      Re: jQuery and autosuggest and more David Mark <dmark.cinsoft@gmail.com> - 2012-09-19 11:45 -0700
            Re: jQuery and autosuggest and more Christoph Becker <cmbecker69@gmx.de> - 2012-09-18 02:04 +0200
              Re: jQuery and autosuggest and more "S.T." <anon@anon.com> - 2012-09-17 17:52 -0700
                Re: jQuery and autosuggest and more justaguy <lichunshen84@gmail.com> - 2012-09-17 18:17 -0700
                  Re: jQuery and autosuggest and more David Mark <dmark.cinsoft@gmail.com> - 2012-09-17 19:45 -0700
                Re: jQuery and autosuggest and more David Mark <dmark.cinsoft@gmail.com> - 2012-09-17 19:44 -0700
              Re: jQuery and autosuggest and more justaguy <lichunshen84@gmail.com> - 2012-09-17 18:00 -0700
              Re: jQuery and autosuggest and more David Mark <dmark.cinsoft@gmail.com> - 2012-09-17 20:12 -0700
                Re: jQuery and autosuggest and more Christoph Becker <cmbecker69@gmx.de> - 2012-09-19 01:54 +0200
                  Re: jQuery and autosuggest and more "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2012-09-18 17:45 -0700
                    Re: jQuery and autosuggest and more Christoph Becker <cmbecker69@gmx.de> - 2012-09-19 16:46 +0200
                      Re: jQuery and autosuggest and more Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-09-20 21:35 +0200
                        Re: jQuery and autosuggest and more Christoph Becker <cmbecker69@gmx.de> - 2012-09-21 17:14 +0200
                        Re: jQuery and autosuggest and more Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-09-21 19:05 +0200
                  Re: jQuery and autosuggest and more David Mark <dmark.cinsoft@gmail.com> - 2012-09-18 18:00 -0700
      Re: jQuery and autosuggest and more David Mark <dmark.cinsoft@gmail.com> - 2012-09-17 19:54 -0700
        Re: jQuery and autosuggest and more "S.T." <anon@anon.com> - 2012-09-17 22:53 -0700
          Re: jQuery and autosuggest and more David Mark <dmark.cinsoft@gmail.com> - 2012-09-17 23:34 -0700

Page 1 of 3  [1] 2 3  Next page →

#15895 — jQuery and autosuggest and more

Hi,

I'm a casual user of jQuery.  Question, does jQuery support
autosuggest?  That is, for instance, I have an form INPUT field of
type: text, and I'd like to execute a database query to retrieve a
list of items upon loading of the page, when a user types a few
letters it would show items that starts with these typed letters, and
then, upon a selection, it would trigger another event, for instance,
submit the form.  Is it doable with jQuery?  If so, I'd appreciates an
example.

Thanks in advance.

[toc] | [next] | [standalone]

#15898

Am 2012-09-15 17:19, justaguy meinte:
> Hi,
>
> I'm a casual user of jQuery.  Question, does jQuery support
> autosuggest?  That is, for instance, I have an form INPUT field of
> type: text, and I'd like to execute a database query to retrieve a
> list of items upon loading of the page, when a user types a few
> letters it would show items that starts with these typed letters, and
> then, upon a selection, it would trigger another event, for instance,
> submit the form.  Is it doable with jQuery?  If so, I'd appreciates an
> example.

You must be a "casual user" of any search engine, too.

Follow one of 137,000 hits with
<https://www.google.com/search?client=ubuntu&channel=fs&q=jquery+autosuggest&ie=utf-8&oe=utf-8>

Gregor



-- 
http://vxweb.net

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

#15899

On Sep 15, 2:02 pm, Gregor Kofler <use...@gregorkofler.com> wrote:
> Am 2012-09-15 17:19, justaguy meinte:
>
> > Hi,
>
> > I'm a casual user of jQuery.  Question, does jQuery support
> > autosuggest?  That is, for instance, I have an form INPUT field of
> > type: text, and I'd like to execute a database query to retrieve a
> > list of items upon loading of the page, when a user types a few
> > letters it would show items that starts with these typed letters, and
> > then, upon a selection, it would trigger another event, for instance,
> > submit the form.  Is it doable with jQuery?  If so, I'd appreciates an
> > example.
>
> You must be a "casual user" of any search engine, too.
>
> Follow one of 137,000 hits with
> <https://www.google.com/search?client=ubuntu&channel=fs&q=jquery+autos...>
>
> Gregor
>
> --http://vxweb.net

ok, thanks, now you've open the Pandora's box,.. I have more questions
for you.
a) what do you think of this jQuery's autosuggest plug-in?  it looks
good.
http://code.drewwilson.com/entry/autosuggest-jquery-plugin
supposed you're familiar with it or similar jQuery plug-in for
autosuggest,
b) how to construct a query for ms sql server?
similar to the following
$query = mysql_query("SELECT * FROM my_table WHERE my_field LIKE '%
$input%'");
c) event trigger upon select.
With this plug-in, it's
selectionAdded: callback function - Custom function that is run when a
selection is made by choosing one from the Results dropdown, or by
using the tab/comma keys to add one. The selection item is passed into
this callback function as 'elem'.
Example: selectionAdded: function(elem){ elem.fadeTo("slow", 0.33); }

would selectionAdded: function(){ document.forms[0].submit(); }
submit the form with the selection data?

Many thanks.

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

#15907

Am 2012-09-15 21:11, justaguy meinte:

> ok, thanks, now you've open the Pandora's box,.. I have more questions
> for you.
> a) what do you think of this jQuery's autosuggest plug-in?  it looks
> good.

I have no idea. I use my own library and my own autosuggest widget.

http://vxweb.net/autosuggest

small, flexible, gets the job done - all of the time I need it.

With some additional code, I end up with things like that:

http://vxweb.net/xhrpicker


> b) how to construct a query for ms sql server?
> similar to the following
> $query = mysql_query("SELECT * FROM my_table WHERE my_field LIKE '%
> $input%'");

Er... yes. Mine look something like that. Though the WHERE clause makes 
more sense with my_field LIKE '{$input}%' - Naturally, the $input value 
has to be validated before processing. Get the query result, encode it 
properly as whatever your library prefers (I suppose JSON). Return the 
JSON string. Firebug can tell you all those details.

Gregor

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

#15909

On Sep 15, 5:38 pm, Gregor Kofler <use...@gregorkofler.com> wrote:
> Am 2012-09-15 21:11, justaguy meinte:
>
> > ok, thanks, now you've open the Pandora's box,.. I have more questions
> > for you.
> > a) what do you think of this jQuery's autosuggest plug-in?  it looks
> > good.
>
> I have no idea. I use my own library and my own autosuggest widget.
>
> http://vxweb.net/autosuggest
>
> small, flexible, gets the job done - all of the time I need it.
>
> With some additional code, I end up with things like that:
>
> http://vxweb.net/xhrpicker
>
> > b) how to construct a query for ms sql server?
> > similar to the following
> > $query = mysql_query("SELECT * FROM my_table WHERE my_field LIKE '%
> > $input%'");
>
> Er... yes. Mine look something like that. Though the WHERE clause makes
> more sense with my_field LIKE '{$input}%' - Naturally, the $input value
> has to be validated before processing. Get the query result, encode it
> properly as whatever your library prefers (I suppose JSON). Return the
> JSON string. Firebug can tell you all those details.
>
> Gregor

Wow, it's very elegant. The third one (Suggest3), autosuggest +
populating another field with a value is very close to what I need.
In my case, I need to
first apply autosuggest (retrieving data from a database), then
populate named or ided field2 and field3 with related data.

I would think your library might be able to tweak it as well.  Next
question is, how do we trigger a sql query against a ms sql server
database?  And it would be extremely Helpful if you could have another
page that have Only the samples (sample fields) and their functions.

Thanks.

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

#15916

Am 2012-09-16 00:48, justaguy meinte:
> On Sep 15, 5:38 pm, Gregor Kofler <use...@gregorkofler.com> wrote:
>> Am 2012-09-15 21:11, justaguy meinte:
>>
>>> ok, thanks, now you've open the Pandora's box,.. I have more questions
>>> for you.
>>> a) what do you think of this jQuery's autosuggest plug-in?  it looks
>>> good.
>>
>> I have no idea. I use my own library and my own autosuggest widget.
>>
>> http://vxweb.net/autosuggest
>>
>> small, flexible, gets the job done - all of the time I need it.
>>
>> With some additional code, I end up with things like that:
>>
>> http://vxweb.net/xhrpicker
>>
>>> b) how to construct a query for ms sql server?
>>> similar to the following
>>> $query = mysql_query("SELECT * FROM my_table WHERE my_field LIKE '%
>>> $input%'");
>>
>> Er... yes. Mine look something like that. Though the WHERE clause makes
>> more sense with my_field LIKE '{$input}%' - Naturally, the $input value
>> has to be validated before processing. Get the query result, encode it
>> properly as whatever your library prefers (I suppose JSON). Return the
>> JSON string. Firebug can tell you all those details.
>>
>> Gregor
>
> Wow, it's very elegant. The third one (Suggest3), autosuggest +
> populating another field with a value is very close to what I need.
> In my case, I need to
> first apply autosuggest (retrieving data from a database), then
> populate named or ided field2 and field3 with related data.

RTFS:

var as = vxJS.widget.autoSuggest(
   document.getElementById("suggestInput"),
   { command: "gimmethedata" },
   {
     maxEntries: 15,
     searchMode: true,
     keyElem: document.getElementById("keyInput")
   }
);

will fill an additional key input with data, upon picking a suggestion.

If you need to fill an arbitrary number of fields you can forget about 
the keyElem reference (it's there for convenience). Instead a

vxJS.event.addListener(as, "choose", function() {
   var chosen = this.getChosen();
   ElementReference1.value = chosen.customValue1;
   ElementReference2.value = chosen.customValue2;
   ...
}

would do the trick.

> I would think your library might be able to tweak it as well.  Next
> question is, how do we trigger a sql query against a ms sql server
> database?

POST contains a JSON encoded xmlHttpRequest field - decode it, get it's 
text property (that's what was typed) and do your query.

Your response is again JSON encoded and contains an "entries" array. 
Every array entry should at least hold an "id" (in this case not 
required, though), a "text" property (the line of text shown) with each 
entry and - in this special case a "customValue1" through "customValueN" 
property. The rest is up to you. Again: Firebug or Chrom(e|ium) debugger 
are very helpful with that.

> And it would be extremely Helpful if you could have another
> page that have Only the samples (sample fields) and their functions.

Dunno whether this will ever happen - in the meantime one has stick to 
the page source.

Gregor

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

#15930

On 9/15/2012 8:19 AM, justaguy wrote:
> Hi,
>
> I'm a casual user of jQuery.  Question, does jQuery support
> autosuggest?  That is, for instance, I have an form INPUT field of
> type: text, and I'd like to execute a database query to retrieve a
> list of items upon loading of the page, when a user types a few
> letters it would show items that starts with these typed letters, and
> then, upon a selection, it would trigger another event, for instance,
> submit the form.  Is it doable with jQuery?  If so, I'd appreciates an
> example.
>

If you're most comfortable with jQuery there's the jQuery UI project 
that has quite a few options.

http://jqueryui.com/demos/autocomplete/

Decent tutorial with back-end using PHP:

http://www.jensbits.com/2010/03/29/jquery-ui-autocomplete-widget-with-php-and-mysql/

Footnote, don't know if you were tossing up some quick unsafe sample 
code quickly or if you are a little unclear on SQL injection issues. 
Greg mentioned it, but your sample code that looked like:
mysql_query("select * where id LIKE %".$_GET['term']."%")

... is practically begging for troubles down the line. Very quick, 
non-foolproof but relatively safe PHP SQL injection mini-tutorial*

http://www.tizag.com/mysqlTutorial/mysql-php-sql-injection.php

* assuming you want/need to stick with PHP's mysql_* set of functions. 
Do consider moving to the far safer PHP database methods in the future, 
PDO or at least mysqli_* with prepared statements.

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

#15933

On Sep 17, 3:50 pm, "S.T." <a...@anon.com> wrote:
> On 9/15/2012 8:19 AM, justaguy wrote:
>
> > Hi,
>
> > I'm a casual user of jQuery.  Question, does jQuery support
> > autosuggest?  That is, for instance, I have an form INPUT field of
> > type: text, and I'd like to execute a database query to retrieve a
> > list of items upon loading of the page, when a user types a few
> > letters it would show items that starts with these typed letters, and
> > then, upon a selection, it would trigger another event, for instance,
> > submit the form.  Is it doable with jQuery?  If so, I'd appreciates an
> > example.
>
> If you're most comfortable with jQuery there's the jQuery UI project
> that has quite a few options.
>
> http://jqueryui.com/demos/autocomplete/
>
> Decent tutorial with back-end using PHP:
>
> http://www.jensbits.com/2010/03/29/jquery-ui-autocomplete-widget-with...
>
> Footnote, don't know if you were tossing up some quick unsafe sample
> code quickly or if you are a little unclear on SQL injection issues.
> Greg mentioned it, but your sample code that looked like:
> mysql_query("select * where id LIKE %".$_GET['term']."%")
>
> ... is practically begging for troubles down the line. Very quick,
> non-foolproof but relatively safe PHP SQL injection mini-tutorial*
>
> http://www.tizag.com/mysqlTutorial/mysql-php-sql-injection.php
>
> * assuming you want/need to stick with PHP's mysql_* set of functions.
> Do consider moving to the far safer PHP database methods in the future,
> PDO or at least mysqli_* with prepared statements.

Thank you very much for the useful and CLEAR note.
I missed jQuery's autocomplete because of misunderstanding of its
term, "autocomplete", I took autocomplete as when we type the first
few letters of a word for a modern web browser and the like the
software automatically complete the whole word for us.  And I take
"autosuggest" as giving us Choices when we type... bomber!

The jQuery's autocomplete looks neat.  I have a question though.
With regard to the last task of Action/Event upon select,
One way,
"
Supply a callback function to handle the select event as an init
option.
$( ".selector" ).autocomplete({
   select: function(event, ui) { ... }
});
"

Another way,
Bind to the select event by type: autocompleteselect.
$( ".selector" ).bind( "autocompleteselect", function(event, ui) {
  ...
});

Is the "even" and "ui" parameters are optional?  Because in our case,
we would only need to
function() {document.forms[0].submit();}


With regard to the db query stmt, I copy the code from others, yeah,
we shouldn't be lazy or get into security trouble.

Again, many thanks.

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

#15937

On 9/17/2012 2:42 PM, justaguy wrote:

> Thank you very much for the useful and CLEAR note.

You're welcome!

> The jQuery's autocomplete looks neat.  I have a question though.
> With regard to the last task of Action/Event upon select,
> One way,
> "
> Supply a callback function to handle the select event as an init
> option.
> $( ".selector" ).autocomplete({
>     select: function(event, ui) { ... }
> });
> "
>
> Another way,
> Bind to the select event by type: autocompleteselect.
> $( ".selector" ).bind( "autocompleteselect", function(event, ui) {
>    ...
> });
>
> Is the "even" and "ui" parameters are optional?  Because in our case,
> we would only need to
> function() {document.forms[0].submit();}

I suppose you don't truly need those parameters, but assuming you need 
to pass the autocomplete selection made you'll need to do something with 
the ui parameter. ui.item returns the JSON output of the selection chosen.

I usually use autocomplete with AJAX'y type stuff, i.e.
select: function(e,ui) {
	$.post("page.php",{selection:ui.item.id});
}

... but nothing stopping you from grabbing part of ui.item and changing 
the value of a hidden input in the form or altering the form's action 
URL with appended data and then submit().

Suggest you just try:

select: function(event,ui) {
	console.log(ui.item)
}

.. to see the returned data, then figure out what data you want to use 
and figure out the best means to inject it in the form and then force 
the form to submit.

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

#15941

On Sep 17, 6:38 pm, "S.T." <a...@anon.com> wrote:
> On 9/17/2012 2:42 PM, justaguy wrote:
>
> > Thank you very much for the useful and CLEAR note.
>
> You're welcome!
>
>
>
>
>
>
>
>
>
> > The jQuery's autocomplete looks neat.  I have a question though.
> > With regard to the last task of Action/Event upon select,
> > One way,
> > "
> > Supply a callback function to handle the select event as an init
> > option.
> > $( ".selector" ).autocomplete({
> >     select: function(event, ui) { ... }
> > });
> > "
>
> > Another way,
> > Bind to the select event by type: autocompleteselect.
> > $( ".selector" ).bind( "autocompleteselect", function(event, ui) {
> >    ...
> > });
>
> > Is the "even" and "ui" parameters are optional?  Because in our case,
> > we would only need to
> > function() {document.forms[0].submit();}
>
> I suppose you don't truly need those parameters, but assuming you need
> to pass the autocomplete selection made you'll need to do something with
> the ui parameter. ui.item returns the JSON output of the selection chosen.
>
> I usually use autocomplete with AJAX'y type stuff, i.e.
> select: function(e,ui) {
>         $.post("page.php",{selection:ui.item.id});
>
> }
>
> ... but nothing stopping you from grabbing part of ui.item and changing
> the value of a hidden input in the form or altering the form's action
> URL with appended data and then submit().
>
> Suggest you just try:
>
> select: function(event,ui) {
>         console.log(ui.item)
>
> }
>
> .. to see the returned data, then figure out what data you want to use
> and figure out the best means to inject it in the form and then force
> the form to submit.

Great, thank you.

var availableTags = [
		"data set 1",
                "data set 2"
		];

                // autosuggest here
		$( "#tags" ).autocomplete({
			source: availableTags
		});
                // it works.

                // take action upon select
		$( ".selector" ).autocomplete({
		   select: function(event, ui) {
			console.log(ui.item);
                     // attempted with
                     // console.log(ui) resulted in the same outcome
		   }
		});
                // Firebug's console does not show anything, either
ALL or Errors

What am I missing here?  Many thanks.

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

#15942

On 9/17/2012 4:31 PM, justaguy wrote:
>
> var availableTags = [
> 		"data set 1",
>                  "data set 2"
> 		];
>
>                  // autosuggest here
> 		$( "#tags" ).autocomplete({
> 			source: availableTags
> 		});
>                  // it works.
>
>                  // take action upon select
> 		$( ".selector" ).autocomplete({
> 		   select: function(event, ui) {
> 			console.log(ui.item);
>                       // attempted with
>                       // console.log(ui) resulted in the same outcome
> 		   }
> 		});
>                  // Firebug's console does not show anything, either
> ALL or Errors
>
> What am I missing here?  Many thanks.
>

You're using autocomplete() a little off.

/*
  I imagine the source will end up server-side
  presented as JSON, but...
*/

var availableTags = [
         {
         key: 1,
         title: "Data1",
         label: 'Data Set 1'},
     {
         key: 2,
         title: "Data2",
         label: 'Data Set 2'},
     {
         key: 3,
         title: "Data3",
         label: 'Data Set 3'}
     ];

$( "#tags" ).autocomplete({
     source: availableTags,
     select: function(event, ui) {
         console.log(ui.item);

         // however you want to do the form part...
         $("#sel").val(ui.item.value);
         console.log("Hidden input set to: "+$("#sel").val());
         //$("#toSubmit").submit();

    }
});


See: http://jsfiddle.net/wF5ek/1/

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

#15946

On Sep 17, 8:00 pm, "S.T." <a...@anon.com> wrote:
> On 9/17/2012 4:31 PM, justaguy wrote:
>
>
>
>
>
>
>
>
>
>
>
> > var availableTags = [
> >            "data set 1",
> >                  "data set 2"
> >            ];
>
> >                  // autosuggest here
> >            $( "#tags" ).autocomplete({
> >                    source: availableTags
> >            });
> >                  // it works.
>
> >                  // take action upon select
> >            $( ".selector" ).autocomplete({
> >               select: function(event, ui) {
> >                    console.log(ui.item);
> >                       // attempted with
> >                       // console.log(ui) resulted in the same outcome
> >               }
> >            });
> >                  // Firebug's console does not show anything, either
> > ALL or Errors
>
> > What am I missing here?  Many thanks.
>
> You're using autocomplete() a little off.
>
> /*
>   I imagine the source will end up server-side
>   presented as JSON, but...
> */
>
> var availableTags = [
>          {
>          key: 1,
>          title: "Data1",
>          label: 'Data Set 1'},
>      {
>          key: 2,
>          title: "Data2",
>          label: 'Data Set 2'},
>      {
>          key: 3,
>          title: "Data3",
>          label: 'Data Set 3'}
>      ];
>
> $( "#tags" ).autocomplete({
>      source: availableTags,
>      select: function(event, ui) {
>          console.log(ui.item);
>
>          // however you want to do the form part...
>          $("#sel").val(ui.item.value);
>          console.log("Hidden input set to: "+$("#sel").val());
>          //$("#toSubmit").submit();
>
>     }
>
> });
>
> See:http://jsfiddle.net/wF5ek/1/

Thanks (without your pointing out the how exactly to use the select
method, I would just bang my head on the wall).  Got it working
exactly as I want it.  Another way, is to bind the FORM element value
to the ui item value.

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

#15949

On Sep 17, 8:58 pm, justaguy <lichunshe...@gmail.com> wrote:
> On Sep 17, 8:00 pm, "S.T." <a...@anon.com> wrote:
>
>
>
>
>
>
>
>
>
> > On 9/17/2012 4:31 PM, justaguy wrote:
>
> > > var availableTags = [
> > >            "data set 1",
> > >                  "data set 2"
> > >            ];
>
> > >                  // autosuggest here
> > >            $( "#tags" ).autocomplete({
> > >                    source: availableTags
> > >            });
> > >                  // it works.
>
> > >                  // take action upon select
> > >            $( ".selector" ).autocomplete({
> > >               select: function(event, ui) {
> > >                    console.log(ui.item);
> > >                       // attempted with
> > >                       // console.log(ui) resulted in the same outcome
> > >               }
> > >            });
> > >                  // Firebug's console does not show anything, either
> > > ALL or Errors
>
> > > What am I missing here?  Many thanks.
>
> > You're using autocomplete() a little off.
>
> > /*
> >   I imagine the source will end up server-side
> >   presented as JSON, but...
> > */
>
> > var availableTags = [
> >          {
> >          key: 1,
> >          title: "Data1",
> >          label: 'Data Set 1'},
> >      {
> >          key: 2,
> >          title: "Data2",
> >          label: 'Data Set 2'},
> >      {
> >          key: 3,
> >          title: "Data3",
> >          label: 'Data Set 3'}
> >      ];
>
> > $( "#tags" ).autocomplete({
> >      source: availableTags,
> >      select: function(event, ui) {
> >          console.log(ui.item);
>
> >          // however you want to do the form part...
> >          $("#sel").val(ui.item.value);
> >          console.log("Hidden input set to: "+$("#sel").val());
> >          //$("#toSubmit").submit();
>
> >     }
>
> > });
>
> > See:http://jsfiddle.net/wF5ek/1/
>
> Thanks (without your pointing out the how exactly to use the select
> method, I would just bang my head on the wall).  Got it working
> exactly as I want it.  Another way, is to bind the FORM element value
> to the ui item value.

Ok, one minor thing, how do we get rid of the dot in front of each
item?  For instance,
. item 1
. item 2
n ...
But I just want to have
item 1
item 3
n ...

I commented out the ui-widget class to no avail.  A quick glimpse of
jQuery doc does not help neither.  Thanks.

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

#15952

On Sep 17, 9:19 pm, justaguy <lichunshe...@gmail.com> wrote:
> On Sep 17, 8:58 pm, justaguy <lichunshe...@gmail.com> wrote:
>
>
>
>
>
>
>
>
>
> > On Sep 17, 8:00 pm, "S.T." <a...@anon.com> wrote:
>
> > > On 9/17/2012 4:31 PM, justaguy wrote:
>
> > > > var availableTags = [
> > > >            "data set 1",
> > > >                  "data set 2"
> > > >            ];
>
> > > >                  // autosuggest here
> > > >            $( "#tags" ).autocomplete({
> > > >                    source: availableTags
> > > >            });
> > > >                  // it works.
>
> > > >                  // take action upon select
> > > >            $( ".selector" ).autocomplete({
> > > >               select: function(event, ui) {
> > > >                    console.log(ui.item);
> > > >                       // attempted with
> > > >                       // console.log(ui) resulted in the same outcome
> > > >               }
> > > >            });
> > > >                  // Firebug's console does not show anything, either
> > > > ALL or Errors
>
> > > > What am I missing here?  Many thanks.
>
> > > You're using autocomplete() a little off.
>
> > > /*
> > >   I imagine the source will end up server-side
> > >   presented as JSON, but...
> > > */
>
> > > var availableTags = [
> > >          {
> > >          key: 1,
> > >          title: "Data1",
> > >          label: 'Data Set 1'},
> > >      {
> > >          key: 2,
> > >          title: "Data2",
> > >          label: 'Data Set 2'},
> > >      {
> > >          key: 3,
> > >          title: "Data3",
> > >          label: 'Data Set 3'}
> > >      ];
>
> > > $( "#tags" ).autocomplete({
> > >      source: availableTags,
> > >      select: function(event, ui) {
> > >          console.log(ui.item);
>
> > >          // however you want to do the form part...
> > >          $("#sel").val(ui.item.value);
> > >          console.log("Hidden input set to: "+$("#sel").val());
> > >          //$("#toSubmit").submit();
>
> > >     }
>
> > > });
>
> > > See:http://jsfiddle.net/wF5ek/1/
>
> > Thanks (without your pointing out the how exactly to use the select
> > method, I would just bang my head on the wall).  Got it working
> > exactly as I want it.  Another way, is to bind the FORM element value
> > to the ui item value.
>
> Ok, one minor thing, how do we get rid of the dot in front of each
> item?  For instance,
> . item 1
> . item 2
> n ...
> But I just want to have
> item 1
> item 3
> n ...
>
> I commented out the ui-widget class to no avail.  A quick glimpse of
> jQuery doc does not help neither.  Thanks.

How do make multiple input fiels/elements using autosuggest?

The following syntax is incorrect:
$( "#tags","#tags2" ).autocomplete({
  ...
});

And the following is correct but inefficient, what if I have 10 fields
or 20 fields that need autosuggest
$( "#tags").autocomplete({
  ...
});

$( "#tags2" ).autocomplete({
  ...
});

Thoughts?  Thanks.

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

#15960

On 9/17/2012 7:47 PM, justaguy wrote:

> How do make multiple input fiels/elements using autosuggest?
>
> The following syntax is incorrect:
> $( "#tags","#tags2" ).autocomplete({
>    ...
> });
>
> And the following is correct but inefficient, what if I have 10 fields
> or 20 fields that need autosuggest
> $( "#tags").autocomplete({
>    ...
> });
>
> $( "#tags2" ).autocomplete({
>    ...
> });
>
> Thoughts?  Thanks

It's a little difficult to answer without a clearer idea of the end 
goal, but as an example you can set the autocomplete based on one 
selector - we'll use class name 'autocomplete' here, then change the 
data source of that autocomplete event based on focus() events using the 
data() method tied to a hard-coded attribute in the various inputs. See:
http://jsfiddle.net/yrPRW/

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

#15961

On Sep 18, 1:17 am, "S.T." <a...@anon.com> wrote:
> On 9/17/2012 7:47 PM, justaguy wrote:
>
>
>
>
>
>
>
>
>
> > How do make multiple input fiels/elements using autosuggest?
>
> > The following syntax is incorrect:
> > $( "#tags","#tags2" ).autocomplete({
> >    ...
> > });
>
> > And the following is correct but inefficient, what if I have 10 fields
> > or 20 fields that need autosuggest
> > $( "#tags").autocomplete({
> >    ...
> > });
>
> > $( "#tags2" ).autocomplete({
> >    ...
> > });
>
> > Thoughts?  Thanks
>
> It's a little difficult to answer without a clearer idea of the end
> goal, but as an example you can set the autocomplete based on one
> selector - we'll use class name 'autocomplete' here, then change the
> data source of that autocomplete event based on focus() events using the
> data() method tied to a hard-coded attribute in the various inputs.
> See:http://jsfiddle.net/yrPRW/

Not a bit of which requires or is even simplified by jQuery. Ironic
that you are talking about using jQuery to do anything related to
attributes. No matter how many times you are told that jQuery is (and
always has been) clueless about attributes, you want to use it to read
attributes. Why? Because it says "jQuery" on it? :)

It's interesting that you recently referred to My Library as
"abandonware" when it has had attributes right from the start (roughly
five years ago). Do you see the additional irony here? While it has
sat "abandoned" (think "finished") for five years, jQuery has been
perpetually fiddling with their "attr" (and later "prop") code. Does
constant meddling with code and seemingly endless snafus give you
confidence? Think of jQuery as "franticware". ;)

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

#15963

On 9/17/2012 10:32 PM, David Mark wrote:
> On Sep 18, 1:17 am, "S.T."<a...@anon.com>  wrote:
>> On 9/17/2012 7:47 PM, justaguy wrote:
>>
>>
>>> How do make multiple input fiels/elements using autosuggest?
>>
>>> The following syntax is incorrect:
>>> $( "#tags","#tags2" ).autocomplete({
>>>     ...
>>> });
>>
>>> And the following is correct but inefficient, what if I have 10 fields
>>> or 20 fields that need autosuggest
>>> $( "#tags").autocomplete({
>>>     ...
>>> });
>>
>>> $( "#tags2" ).autocomplete({
>>>     ...
>>> });
>>
>>> Thoughts?  Thanks
>>
>> It's a little difficult to answer without a clearer idea of the end
>> goal, but as an example you can set the autocomplete based on one
>> selector - we'll use class name 'autocomplete' here, then change the
>> data source of that autocomplete event based on focus() events using the
>> data() method tied to a hard-coded attribute in the various inputs.
>> See:http://jsfiddle.net/yrPRW/
>
> Not a bit of which requires or is even simplified by jQuery. Ironic
> that you are talking about using jQuery to do anything related to
> attributes. No matter how many times you are told that jQuery is (and
> always has been) clueless about attributes, you want to use it to read
> attributes. Why? Because it says "jQuery" on it? :)

The fact that the OP requested a solution using jQuery played a role in 
my jQuery-related answer. Is that confusing?

> It's interesting that you recently referred to My Library as
> "abandonware" when it has had attributes right from the start (roughly
> five years ago). Do you see the additional irony here? While it has
> sat "abandoned" (think "finished") for five years, jQuery has been
> perpetually fiddling with their "attr" (and later "prop") code. Does
> constant meddling with code and seemingly endless snafus give you
> confidence? Think of jQuery as "franticware". ;)

Five years and I've never heard anyone admit to actually using your 
library, and sure as hell have never seen a site intended for public use 
- any site whatsoever, really - that uses it. In the world of libraries 
that's the definition of failure.

We've been through this about a year ago:
"Show some examples."
"No way, you're just asking 'cause you want to steal the scripts."
"OK, a) that's ridiculous and b) it's obvious there are no examples so 
quit pretending otherwise as you're further embarrassing yourself."

Anything changed in the past 12 months? Any examples? No? EXACTLY! Pipe 
down until you've got something to show. You're fooling no one.

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

#15965

On Sep 18, 2:22 am, "S.T." <a...@anon.com> wrote:
> On 9/17/2012 10:32 PM, David Mark wrote:
>
>
>
>
>
>
>
>
>
> > On Sep 18, 1:17 am, "S.T."<a...@anon.com>  wrote:
> >> On 9/17/2012 7:47 PM, justaguy wrote:
>
> >>> How do make multiple input fiels/elements using autosuggest?
>
> >>> The following syntax is incorrect:
> >>> $( "#tags","#tags2" ).autocomplete({
> >>>     ...
> >>> });
>
> >>> And the following is correct but inefficient, what if I have 10 fields
> >>> or 20 fields that need autosuggest
> >>> $( "#tags").autocomplete({
> >>>     ...
> >>> });
>
> >>> $( "#tags2" ).autocomplete({
> >>>     ...
> >>> });
>
> >>> Thoughts?  Thanks
>
> >> It's a little difficult to answer without a clearer idea of the end
> >> goal, but as an example you can set the autocomplete based on one
> >> selector - we'll use class name 'autocomplete' here, then change the
> >> data source of that autocomplete event based on focus() events using the
> >> data() method tied to a hard-coded attribute in the various inputs.
> >> See:http://jsfiddle.net/yrPRW/
>
> > Not a bit of which requires or is even simplified by jQuery. Ironic
> > that you are talking about using jQuery to do anything related to
> > attributes. No matter how many times you are told that jQuery is (and
> > always has been) clueless about attributes, you want to use it to read
> > attributes. Why? Because it says "jQuery" on it? :)
>
> The fact that the OP requested a solution using jQuery played a role in
> my jQuery-related answer. Is that confusing?

A word of advice: implying that I am confused is not going to buy you
any credibility here.

Regardless, my comment simply pointed out the irony of you
recommending jQuery be used to fetch attribute values. Would be just
as ironic if you recommended jQuery for basic XHR or jQuery UI for
monitoring keyboard input. How long have you been hanging around here
and how could you still be recommending jQuery-branded BS for such
tasks?

>
> > It's interesting that you recently referred to My Library as
> > "abandonware" when it has had attributes right from the start (roughly
> > five years ago). Do you see the additional irony here? While it has
> > sat "abandoned" (think "finished") for five years, jQuery has been
> > perpetually fiddling with their "attr" (and later "prop") code. Does
> > constant meddling with code and seemingly endless snafus give you
> > confidence? Think of jQuery as "franticware". ;)
>
> Five years and I've never heard anyone admit to actually using your
> library,

You are either lying or simply haven't had time to read every post for
the last five years.

> and sure as hell have never seen a site intended for public use
> - any site whatsoever, really - that uses it.

And that means what exactly? Clearly you haven't had time to visit
every site on the Web either.

> In the world of libraries
> that's the definition of failure.

Sorry, no. If you were here five years ago when the library was built,
you'd know that I very specifically rejected the notion of marketing
the script to the masses. People mentioned T-shirts, birthday parties
(for scripts?!), etc. and I told them I would not do any of that,
allowing the masses to make up their own minds. In fact, I took the
opposite approach with a plain Jane presentation and constantly
disclaimers that it was really more for example than anything else
(remember I don't like monolithic libraries). You just referenced this
line (in your own clumsy, wrong-headed way) in the last day or so
(something about using My Library would be "stupid").

How ironic that in the "world of libraries", specifically mass-
marketed libraries like jQuery, virtually every denizen ended up with
code just like mine. That, along with the undeniable indefatigability
of the script indicates not only success from the start, but sustained
success over five years. Odd that you aren't grateful for my generous
example; instead you try to poke fun at it every time you post here.
It's almost as if you are a complete moron. (?)

Furthermore, one of the primary needs for an autocomplete/suggest
widget is reliable handling of keyboard input. Guess which library
succeeded on that front when most of the "popular" libraries were
fumbling around with browser sniffing? Yep, your old "foil" My
Library. It's almost as if you haven't read anything since you've been
here. (?)

>
> We've been through this about a year ago:
> "Show some examples."

And who/what are you quoting here?

> "No way, you're just asking 'cause you want to steal the scripts."

Never me. :)

Let me try to simplify this for you: I don't like you (whoever you
are). I would sooner fly to the moon than go out of my way to show you
anything. Make sense? :)

> "OK, a) that's ridiculous and b) it's obvious there are no examples so
> quit pretending otherwise as you're further embarrassing yourself."

Examples of what exactly? And just who are you talking to at this
point? You seem to be having an unattributed discussion with
yourself. :(

>
> Anything changed in the past 12 months? Any examples? No? EXACTLY! Pipe
> down until you've got something to show. You're fooling no one.

Down to the SHOUTING is it? Clearly nothing has changed (for you) in
the last five years. Pity. :(

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

#15966

On Sep 18, 1:32 am, David Mark <dmark.cins...@gmail.com> wrote:
> On Sep 18, 1:17 am, "S.T." <a...@anon.com> wrote:
>
>
>
>
>
>
>
>
>
> > On 9/17/2012 7:47 PM, justaguy wrote:
>
> > > How do make multiple input fiels/elements using autosuggest?
>
> > > The following syntax is incorrect:
> > > $( "#tags","#tags2" ).autocomplete({
> > >    ...
> > > });
>
> > > And the following is correct but inefficient, what if I have 10 fields
> > > or 20 fields that need autosuggest
> > > $( "#tags").autocomplete({
> > >    ...
> > > });
>
> > > $( "#tags2" ).autocomplete({
> > >    ...
> > > });
>
> > > Thoughts?  Thanks
>
> > It's a little difficult to answer without a clearer idea of the end
> > goal, but as an example you can set the autocomplete based on one
> > selector - we'll use class name 'autocomplete' here, then change the
> > data source of that autocomplete event based on focus() events using the
> > data() method tied to a hard-coded attribute in the various inputs.
> > See:http://jsfiddle.net/yrPRW/
>
> Not a bit of which requires or is even simplified by jQuery. Ironic
> that you are talking about using jQuery to do anything related to
> attributes. No matter how many times you are told that jQuery is (and
> always has been) clueless about attributes, you want to use it to read
> attributes. Why? Because it says "jQuery" on it? :)
>

For further reading:

http://stackoverflow.com/questions/5874652/prop-vs-attr/5876747

That's just one of hundreds of such questions on SO, each with a
stream of mostly confused answers (as well as further questions). The
primary "answer man" for jQuery is called T.J. Crowder and clearly has
no idea what he's talking about (no coincidence that he's never been
seen around here).

http://stackoverflow.com/questions/6432246/radio-buttons-and-attrchecked-checked-does-not-work-in-ie7?lq=1

http://stackoverflow.com/questions/3121785/set-radio-button-checked-in-jquery-based-on-id?rq=1

Seems jQuery really simplifies basic DOM manipulation. Getting/setting
properties (don't need to mess with attributes 99.9% of the time) has
never been easier. :)

Ironic that this example, as well as My Library, existed long before
the jQuery 1.6 disaster. In fact, they (along with my first review of
jQuery back in 2007) were the impetus for the change to "attr" and
"prop" (the latter function name lifted straight from my example).

http://www.cinsoft.net/attributes.html

That's the one Resig copied into the jQuery repository (and later
deleted when I reminded him of the copyright at the bottom of the
page). He whined and denigrated the lifted code as "common sense" at
the time, yet in five years he never came close to solving the issues
tackled in the example. And, of course, if it really were all "common
sense" (sort of like the feature detection/testing code he lifted from
My Library back in 2008), then why couldn't any of the people
contributing to jQuery come up with the solutions? It's almost as if
they are a bunch of inexperienced greenhorns (not to mention
plagiarists). :(

Unfortunately for those who put their faith in the jQuery "brain
trust", when they tried to use their own "common sense", they botched
the job so badly that they had to partially revert the changes in
1.6.1. All old news for those who have followed this group over the
years. As soon as 1.6 was released, it was predicted here that they'd
follow up with another "upgrade" soon after (they sure as hell
couldn't go forward with what they had).

It's also unfortunate that so many people had blissfully deployed
jQuery without any clue that the original "attr" (which reemerged in
1.6.1) was broken beyond belief (as mentioned in my review from 2007
and later detailed in numerous examples). That huge user base painted
the project into a corner so that they could never fix this method,
which is used extensively in virtually every jQuery application and
example. For years I heard the excuse that "attr" was broken only in
"obscure" or "edge" cases and for years I insisted that was complete
and utter BS (as it clearly turned out to be).

Of course, some will be grateful (despite the ultimately negative
result for jQuery) for my example and others will whine and babble
about the number of contributors to jQuery and how they "keep up" with
the latest browser bugs and that nobody uses My Library (save for the
jQuery authors when they need to find answers). Those others are quite
obviously idiots (see the anonymous poster known only as "S.T.").

By any rational definition (even in the world of JS libraries), jQuery
is an outrageous failure. Furthermore, the management of the project
and subsequent "support" on forums like StackOverflow and jQuery's own
discussion group compounds their failures. The specific (and glaring)
example of "attr" is part of the jQuery foundation (where it meets the
DOM basically) and the flurry of related activity (first affecting
1.6) occurred roughly five years into its run. Furthermore, the
specific issues were discussed to death here and at some point Resig
told his flock to put on blinders where CLJ was concerned. Yes,
really; you can't make this stuff up. :(

Of course, if you measure success by the number of people burned by
these frauds, it's absolutely smashing. ;)

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

#15968

On Sep 18, 1:17 am, "S.T." <a...@anon.com> wrote:
> On 9/17/2012 7:47 PM, justaguy wrote:
>
>
>
>
>
>
>
>
>
> > How do make multiple input fiels/elements using autosuggest?
>
> > The following syntax is incorrect:
> > $( "#tags","#tags2" ).autocomplete({
> >    ...
> > });
>
> > And the following is correct but inefficient, what if I have 10 fields
> > or 20 fields that need autosuggest
> > $( "#tags").autocomplete({
> >    ...
> > });
>
> > $( "#tags2" ).autocomplete({
> >    ...
> > });
>
> > Thoughts?  Thanks
>
> It's a little difficult to answer without a clearer idea of the end
> goal, but as an example you can set the autocomplete based on one
> selector - we'll use class name 'autocomplete' here, then change the
> data source of that autocomplete event based on focus() events using the
> data() method tied to a hard-coded attribute in the various inputs. See:http://jsfiddle.net/yrPRW/

Ok, that makes sense, thank you.  But I ran into a problem when I
attempted to implement it with a project.  That is, with identical
code except field id difference and changed accordingly in the
function references.

The error msg is:
TypeError: $("#productid").autocomplete is not a function
[Break On This Error]
select: function(event, ui) {

Notes:
I have a field with id of "productid" in the HTML form and have
replaced "tags" references in the jQuery function references to
"productid".  What could have caused it to misfire?

Many thanks.

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

Page 1 of 3  [1] 2 3  Next page →

Back to top | Article view | comp.lang.javascript

csiph-web