Loading ...
Sorry, an error occurred while loading the content.

Re: Autocomplete submits form with [enter] or mouse click - jennykhan

Expand Messages
  • jennykhan
    Hi Matthew, That s strange -- your code works for me. You should remove the onchange= onItemSelect(); from your input box since you are using a Custom Event
    Message 1 of 10 , Jun 29, 2006
    • 0 Attachment
      Hi Matthew,

      That's strange -- your code works for me. You should remove the
      onchange="onItemSelect();" from your input box since you are using a
      Custom Event for this functionality. I'd even say that you don't need
      onItemSelect at all. What OS/browser are you having problems on?

      Jenny



      --- In ydn-javascript@yahoogroups.com, "Matthew" <matthew_gisonno@...>
      wrote:
      >
      > function onItemSelect(sType, aArgs) {
      > //populate the textbox with the selection
      > YAHOO.util.Dom.get("myInput").value = aArgs[1].innerText;
      > //find the form in the dom and submit it
      > YAHOO.util.Dom.get("searchForm").submit();
      > }
      >
      > This returns "undefined" in the text box. Any ideas on why this is
      > happening?
      >
      > --- In ydn-javascript@yahoogroups.com, "jennykhan" <jennyhan@> wrote:
      > >
      > > Hi Matthew,
      > >
      > > Have you tried something like this?
      > >
      > > function onItemSelect(sType, aArgs) {
      > > //populate the textbox with the selection
      > > YAHOO.util.Dom.get("searchBox").value = aArgs[1].innerText;
      > > //find the form in the dom and submit it
      > > YAHOO.util.Dom.get("searchForm").submit();
      > > }
      > >
      > > Jenny
      > >
      > >
      > >
      > > --- In ydn-javascript@yahoogroups.com, "Matthew" <matthew_gisonno@>
      > > wrote:
      > > >
      > > > --- In ydn-javascript@yahoogroups.com, "tivacus" <pcavit@> wrote:
      > > > >
      > > > > --- In ydn-javascript@yahoogroups.com, "Matthew"
      <matthew_gisonno@>
      > > > > wrote:
      > > > > >
      > > > > > Thank you for your reply!
      > > > > >
      > > > > > I have gotten this to work and it submits my form, but the form
      > > > only
      > > > > > submits what the user typed and not what the auto complete has
      > > > stuck
      > > > > > into the box.
      > > > > >
      > > > > > If anyone can help me debug this, it would be greatly
      appreciated.
      > > > > >
      > > > >
      > > > > Odd, mine fills in the autocomplete data before submitting.
      Could
      > > > it
      > > > > be some weirdness with your data transport method? I'm using
      JSON
      > > > and
      > > > > it's working as expected here. Failing that you could always
      do it
      > > > > manually in the onItemSelect callback. Just add some code to set
      > > > the
      > > > > value of the search box to whatever the item selected's value
      was.
      > > > > Should be doable with an extra line before you submit the form.
      > > > >
      > > >
      > > > tivacus, thank you for your replies. below is my code that is not
      > > > working. I do not understand how you find the autocomplete
      selected
      > > > value and set the text box value.
      > > >
      > > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
      > > >
      > > >
      > > > <head>
      > > > <title>Untitled</title>
      > > > <!-- Dependencies -->
      > > > <script src="/includes/yahoo.js"></script>
      > > > <script src="/includes/dom.js"></script>
      > > > <script src="/includes/event.js"></script>
      > > > <!-- OPTIONAL: Animation (required only if enabling animation) -->
      > > > <script src="/includes/animation.js"></script>
      > > > <!-- Source file -->
      > > > <script src="/includes/autocomplete.js"></script>
      > > > <style>
      > > > div#myContainer {z-Index: 10000; position: absolute; top: 50px;
      left:
      > > > 564px; padding: 5px; width: 200px; border: 1px Black Solid;
      > > > background: #cccccc; color: #000000}
      > > > div#myContainer ul,li {padding:0;margin:0;}
      > > > li.myClass {background: #ffffff;}
      > > > </style>
      > > >
      > > >
      > > > </head>
      > > >
      > > > <body>
      > > > <form action="http://intuitsearch.intuit.com/search" method="get"
      > > > id="searchForm" autocomplete="off"><input value="xml_no_dtd"
      > > > name="output" type="hidden"><input value="accountant_site"
      > > > name="client" type="hidden"><input value="accountant_site"
      > > > name="site" type="hidden"><input value="accountant_site"
      > > > name="proxystylesheet" type="hidden"><input value="10" name="num"
      > > > type="hidden"><input name="q" id="q" type="text" class="searchbox"
      > > > onchange="onItemSelect();">  <input type="image"
      > > > src="/images/homepage/btn-search.gif" alt="Search" width="70"
      > > > height="20" border="0"></form>
      > > > <div id="myContainer"></div>
      > > > <script>
      > > >
      > > > function init () {
      > > > var myArray = ["QuickBooks Pro", "QuickBooks Premier", "QuickBooks
      > > > Accountant Edition"];
      > > > var myDataSource1 = new YAHOO.widget.DS_JSArray(myArray);
      > > > var autoComplete = new YAHOO.widget.AutoComplete('q','myContainer',
      > > > myDataSource1);
      > > > // Use a custom class for LI elements
      > > > autoComplete.highlightClassName = "myClass";
      > > > autoComplete.itemSelectEvent.subscribe(onItemSelect);
      > > > }
      > > >
      > > > function onItemSelect(sType, aArgs) {
      > > > //set the value manually
      > > > YAHOO.util.Dom.get("q").value =
      > > > YAHOO.widget.AutoComplete.itemSelectEvent.value();
      > > > //find the form in the dom and submit it
      > > > YAHOO.util.Dom.get("searchForm").submit();
      > > > }
      > > > YAHOO.util.Event.addListener(window, 'load', init);
      > > >
      > > >
      > > > </script>
      > > > </body>
      > > >
      > >
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.