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

Autocomplete

Expand Messages
  • zmische
    Is it possible to disable data request by queryDelay parameter? Now I just could set queryDelay parameter to a high value... I need to produce the request
    Message 1 of 12 , Jun 30, 2006
    • 0 Attachment
      Is it possible to disable data request by queryDelay parameter?
      Now I just could set queryDelay parameter to a high value...
      I need to produce the request only when I click some button and not
      when delay expired. And how could I do the Request using call to
      function in Autocomplete (which function should I call?)?

      Perhaps it could be a feature request?
      Thanks in advance!
    • jennykhan
      Hi there, This is a nice feature that you can request via our SourceForge tracker at http://sourceforge.net/tracker/?group_id=165715&atid=836479. In the
      Message 2 of 12 , Jul 12, 2006
      • 0 Attachment
        Hi there,

        This is a nice feature that you can request via our SourceForge
        tracker at http://sourceforge.net/tracker/?group_id=165715&atid=836479.

        In the meantime, you can probably achieve what you need by setting the
        minQueryLength attribute to a sufficiently high value. I'd also set
        the input field's maxLength property to be something appropriate and
        less than the minQueryLength value.

        Thanks,
        Jenny




        --- In ydn-javascript@yahoogroups.com, "zmische" <zmische@...> wrote:
        >
        > Is it possible to disable data request by queryDelay parameter?
        > Now I just could set queryDelay parameter to a high value...
        > I need to produce the request only when I click some button and not
        > when delay expired. And how could I do the Request using call to
        > function in Autocomplete (which function should I call?)?
        >
        > Perhaps it could be a feature request?
        > Thanks in advance!
        >
      • Marty Phee
        I m using the autocomplete on a field without problems. Now the client wants the ability to scroll past the end. I m returning the top 20 results and they
        Message 3 of 12 , Dec 4, 2006
        • 0 Attachment
          I'm using the autocomplete on a field without problems. Now the client
          wants the ability to scroll past the end. I'm returning the top 20
          results and they want to be able to keep scrolling past the end (ie: get
          more data). I'm using a xhr datasource. Has anyone done anything like
          this?

          The backing datasource has 8000+ records. Before I implemented this
          they were bringing all 8k to the browser and had the ability to scroll
          after they typed a few letters in since all 8k were already downloaded.
        • daskevin
          I have an Autocomplete control and the basics are working fine. I have quoted a simple HTML page below with a JSON result. It contains a few US states and the
          Message 4 of 12 , Apr 11, 2007
          • 0 Attachment
            I have an Autocomplete control and the basics are working fine.
            I have quoted a simple HTML page below with a JSON result.
            It contains a few US states and the results comes back OK when you
            starting typing in the field.

            The feature I added was to have a button to the right that would mimic
            a SELECT widget. Clicking this image would bring back the list (or a
            small part of it) . With the code below, that works, but only once per
            page load. Once I do click the button, it no longer fires unless I
            reload the page.

            Is this a DOM issue that I do not understand?
            How do I get the button to continue listening for "click?
            Sorry for the extra includes. I didn't remove those yet from other
            testing :-)

            Thanks for any info you can provide.
            Cheers,
            Kevin


            <html>
            <head>

            <!-- Dependencies -->
            <script type="text/javascript"
            src="./build/yahoo-dom-event/yahoo-dom-event.js"></script>
            <!-- OPTIONAL: Connection (required only if using XHR DataSource) -->
            <script type="text/javascript"
            src="./build/connection/connection-min.js"></script>
            <!-- OPTIONAL: Animation (required only if enabling animation)
            -->
            <script type="text/javascript"
            src="./build/animation/animation-min.js"></script>
            <script type="text/javascript"
            src="./build/autocomplete/autocomplete-min.js"></script>

            <script src = "./build/treeview/treeview-min.js" ></script>

            <link rel="stylesheet" type="text/css"
            href="./build/treeview/assets/tree.css" />
            <link rel="stylesheet" type="text/css"
            href="./build/tabview/assets/tabview.css">
            <!-- optional skin for border tabs -->
            <link rel="stylesheet" type="text/css"
            href="./build/tabview/assets/border_tabs.css">
            <script type="text/javascript"
            src="./build/element/element-beta-min.js"></script>
            <!-- Source file -->
            <script type="text/javascript"
            src="./build/tabview/tabview-min.js"></script>

            <script type="text/javascript" src="./build/yahoo/yahoo-min.js"></script>
            <script type="text/javascript" src="./build/event/event-min.js" ></script>
            <script type="text/javascript" src="./build/dom/dom-min.js" ></script>
            <script type="text/javascript"
            src="./build/calendar/calendar-min.js"></script>

            <script type="text/javascript">
            var myServer = "./mydata.txt";
            var mySchema = ["ResultSet.Result","Description","Title"]
            //var mySchema = ["ResultSet.Result","Title","Description"]
            </script>
            <style>
            <!--
            label,.inputplain {font-size: 12px;display: block;float:
            left;margin-bottom: 10px;}
            .inputplain{width:450px}
            label {text-align: right;width: 225px;padding-right: 20px;}
            .radio {font-size: 12px;width: 250px;float: left;margin-bottom: 10px}
            br {clear: left;}
            .rpttitle{font-family: serif;font-size: 14px; font-weight: bold;}
            .but{border: 1px thin;border-style: solid;border-color:
            #bbbbbb;margin: 3px}
            -->
            </style>
            <style>
            <!--
            .wauto {position:absolute;z-index:9050;}
            .wauto .yui-ac-content
            {position:absolute;left:0;top:0;width:20em;border:1px solid
            #404040;background:#fff;overflow:hidden;text-align:left;z-index:9050;}
            .wauto .yui-ac-shadow
            {position:absolute;left:0;top:0;margin:.3em;background:#a0a0a0;z-index:9049;}
            .wauto ul {padding:5px 0;width:100%;}
            .wauto li {padding:0 5px;cursor:default;white-space:nowrap;}
            .wauto li.yui-ac-highlight {background:#ff0000;}
            -->
            </style>
            </head>

            <body>
            yui ac test<br/>

            <form name="myform" action="foo">

            <input name="kevinfoo" id="kevinfoo" type="type" size="50" value=""
            style="background:#ddffff"><br/><br/>

            <input name="ackevinfoo" id="ackevinfoo" type="text" size="50">
            <img name="clickmebut" id="clickmebut"
            src="./build/autocomplete/assets/combo_box_arrow.png"/>
            <br/><div id="ackevinfooResult" class="wauto">boo</div>

            <script type="text/javascript">

            //init
            document.getElementById("kevinfoo").value = '';

            var kevinfooDS = new YAHOO.widget.DS_XHR(myServer, mySchema);
            kevinfooDS.scriptQueryParam = "query";
            kevinfooDS.scriptQueryAppend = "inputid=kevinfoo";
            kevinfooDS.responseStripAfter = "<!-";
            kevinfooDS.responseType = YAHOO.widget.DS_XHR.TYPE_JSON;

            var kevinfooAC = new
            YAHOO.widget.AutoComplete("ackevinfoo","ackevinfooResult", kevinfooDS);
            kevinfooAC.delimChar = ";"
            //kevinfooAC.minQueryLength=2;

            var clickmebut = document.getElementById("clickmebut");
            function clickMeHandler(e) {
            // we'll just send a dummy character that our selectList query will
            recognize
            // and it can just do a simply query, either by "a%" or somehow just
            the first 10-20 rows from the table
            kevinfooAC.sendQuery("~");
            document.getElementById("kevinfoo").value = 'done';

            }
            YAHOO.util.Event.addListener(clickmebut, "click", clickMeHandler);



            </script>

            </form>

            <br/>
            All done<br/>
            </body>


            </html>

            my JSON data from mydata.txt

            {"ResultSet":
            {"totalResultsAvailable":"5000",
            "totalResultsReturned":50,
            "firstResultPosition":1,
            "Result": [
            {"Title":"AK","Description":"Alaska"},
            {"Title":"AL","Description":"Alabama"},
            {"Title":"NY","Description":"New York"},
            {"Title":"ND","Description":"North Dakota"},
            {"Title":"OR","Description":"Oregon"},
            {"Title":"RI","Description":"Rhode Island"},
            {"Title":"TX","Description":"Texas"},
            {"Title":"TN","Description":"Tennessee"}
            ]}}


            Thanks,
            Kevin
          • Matt Warden
            ... Man, everyone seems to be doing parts of what I just implemented a couple days ago. Creepy. This is pretty much exactly what I built. See:
            Message 5 of 12 , Apr 11, 2007
            • 0 Attachment
              On 11 Apr 2007 12:46:51 -0700, daskevin <mrjabba@...> wrote:
              > The feature I added was to have a button to the right that would mimic
              > a SELECT widget. Clicking this image would bring back the list (or a
              > small part of it) . With the code below, that works, but only once per
              > page load. Once I do click the button, it no longer fires unless I
              > reload the page.
              >
              > Is this a DOM issue that I do not understand?
              > How do I get the button to continue listening for "click?

              Man, everyone seems to be doing parts of what I just implemented a
              couple days ago. Creepy.

              This is pretty much exactly what I built. See: http://mwarden.f2o.org/zindex.png

              That screenshot is obviously pointing out an issue, but ignoring that,
              you can see that the auto complete looks very like an early IE6 drop
              down.

              Anyway, the reason you are only getting it to work on the first click
              is because after the first click, the control has focus. Thus, a
              second click is not going to fire the textboxFocus event, which is
              where I'm assuming your drop down magic happens.

              Keep in mind also that if the control is in the "dropped down" state,
              a second click on the text box area would cause the drop down to "roll
              up". Thus, I ended up moving the functionality from textboxFocusEvent
              handler to an onclick handler, and I kept the focus state as a
              property of my object.

              --
              Matt Warden
              Cleveland, OH, USA
              http://mattwarden.com


              This email proudly and graciously contributes to entropy.
            • daskevin
              ... mimic ... once per ... http://mwarden.f2o.org/zindex.png ... Hi Matt, Thanks so much for the quick response. I m not quite understanding your response. The
              Message 6 of 12 , Apr 12, 2007
              • 0 Attachment
                --- In ydn-javascript@yahoogroups.com, "Matt Warden" <mwarden@...> wrote:
                >
                > On 11 Apr 2007 12:46:51 -0700, daskevin <mrjabba@...> wrote:
                > > The feature I added was to have a button to the right that would
                mimic
                > > a SELECT widget. Clicking this image would bring back the list (or a
                > > small part of it) . With the code below, that works, but only
                once per
                > > page load. Once I do click the button, it no longer fires unless I
                > > reload the page.
                > >
                > > Is this a DOM issue that I do not understand?
                > > How do I get the button to continue listening for "click?
                >
                > Man, everyone seems to be doing parts of what I just implemented a
                > couple days ago. Creepy.
                >
                > This is pretty much exactly what I built. See:
                http://mwarden.f2o.org/zindex.png
                >
                > That screenshot is obviously pointing out an issue, but ignoring that,
                > you can see that the auto complete looks very like an early IE6 drop
                > down.
                >
                > Anyway, the reason you are only getting it to work on the first click
                > is because after the first click, the control has focus. Thus, a
                > second click is not going to fire the textboxFocus event, which is
                > where I'm assuming your drop down magic happens.
                >
                > Keep in mind also that if the control is in the "dropped down" state,
                > a second click on the text box area would cause the drop down to "roll
                > up". Thus, I ended up moving the functionality from textboxFocusEvent
                > handler to an onclick handler, and I kept the focus state as a
                > property of my object.
                >
                > Matt Warden


                Hi Matt,

                Thanks so much for the quick response.

                I'm not quite understanding your response.
                The handler I create does fire as evidenced by an alert box I put
                there or by logging it. But, the sendQuery function doesn't fire the
                second time. Is it caching the result or something? Is there a way to
                reset the Autocomplete control?

                You stated:
                >>Anyway, the reason you are only getting it to work on the first click
                >>is because after the first click, the control has focus. Thus, a
                >>second click is not going to fire the textboxFocus event, which is
                >>where I'm assuming your drop down magic happens.

                I'm not sure why this matters where the focus is? My event fires the
                second time when I click the button. Only the AutoComplete sendQuery
                method doesn't seem to work the second time.

                >Keep in mind also that if the control is in the "dropped down" state,
                >a second click on the text box area would cause the drop down to "roll
                >up". Thus, I ended up moving the functionality from textboxFocusEvent
                >handler to an onclick handler, and I kept the focus state as a
                >property of my object.

                OK. Thanks for that. I don't think the "dropped down" state will be a
                problem.
                Can you explain what you mean by "I ended up moving the functionality
                from textboxFocusEvent handler to an onclick handler, and I kept the
                focus state as a property of my object"?

                It would be great if you (or someone else) could supply a simpl
                example that explains this a little better for us YUI newbies?

                Many thanks!

                For grins, I shortened up the code sample and re-included it in this
                post.
                I also added: kevinfooDS.maxCacheEntries = 0;
                Now (using FireBug), I can see it doing the GET with the AC control
                (GET
                http://localhost:8080/tomcat-docs/yui/mydata.txt?query=~&inputid=kevinfoo
                (16ms)). But, the AC control's result DIV doesn't display the results
                like it did the first time. So, is this an issue with the AC control
                or with my data source?
                Do I need to reset the data source or something? I'm obviously
                grasping at straws here.

                Sorry if this is redundant.

                <html>
                <head>
                <!-- Dependencies -->
                <script type="text/javascript"
                src="./build/yahoo-dom-event/yahoo-dom-event.js"></script>
                <!-- OPTIONAL: Connection (required only if using XHR DataSource) -->
                <script type="text/javascript"
                src="./build/connection/connection-min.js"></script>
                <!-- OPTIONAL: Animation (required only if enabling animation) -->
                <script type="text/javascript"
                src="./build/animation/animation-min.js"></script>
                <script type="text/javascript"
                src="./build/autocomplete/autocomplete-min.js"></script>
                <script type="text/javascript" src="./build/yahoo/yahoo-min.js"></script>
                <script type="text/javascript" src="./build/event/event-min.js" ></script>
                <script type="text/javascript" src="./build/dom/dom-min.js" ></script>
                <script type="text/javascript">
                var myServer = "./mydata.txt";
                var mySchema = ["ResultSet.Result","Description","Title"]
                </script>
                <style>
                <!--
                .wauto {position:absolute;z-index:9050;}
                .wauto .yui-ac-content
                {position:absolute;left:0;top:0;width:20em;border:1px solid
                #404040;background:#fff;overflow:hidden;text-align:left;z-index:9050;}
                .wauto .yui-ac-shadow
                {position:absolute;left:0;top:0;margin:.3em;background:#a0a0a0;z-index:9049;}
                .wauto ul {padding:5px 0;width:100%;}
                .wauto li {padding:0 5px;cursor:default;white-space:nowrap;}
                .wauto li.yui-ac-highlight {background:#ff0000;}
                .but1 {background:#dddddd;width:50px;border:1px solid}
                -->
                </style>
                </head>
                <body>
                yui ac test<br/>
                <form name="myform" action="foo">
                <input name="kevinfoo" id="kevinfoo" type="type" size="50" value=""
                style="background:#ddffff"><br/><br/>
                <input name="ackevinfoo" id="ackevinfoo" type="text" size="50">
                <span name="clickmebut" id="clickmebut" class="but1" >ClickMe</span>
                <br/><div id="ackevinfooResult" class="wauto"></div>
                <script type="text/javascript">
                //init
                document.getElementById("kevinfoo").value = '';
                var kevinfooDS = new YAHOO.widget.DS_XHR(myServer, mySchema);
                kevinfooDS.scriptQueryParam = "query";
                kevinfooDS.scriptQueryAppend = "inputid=kevinfoo";
                kevinfooDS.responseType = YAHOO.widget.DS_XHR.TYPE_JSON;
                kevinfooDS.maxCacheEntries = 0;
                var kevinfooAC = new
                YAHOO.widget.AutoComplete("ackevinfoo","ackevinfooResult", kevinfooDS);
                var clickMeHandler = function(e) {
                // we'll just send a dummy character that our selectList query will
                recognize
                // and it can just do a simply query, either by "a%" or somehow just
                the first 10-20 rows from the table
                kevinfooAC.sendQuery("~");
                //alert('boo');
                document.getElementById("kevinfoo").value += '1';
                }
                YAHOO.util.Event.addListener("clickmebut", "click", clickMeHandler);
                </script>
                </form>
                <br/>All done<br/>
                </body>
                </html>

                My JSON data, a little shorter:

                {"ResultSet":
                {"totalResultsAvailable":"5000",
                "totalResultsReturned":50,
                "firstResultPosition":1,
                "Result": [
                {"Title":"AK","Description":"Alaska"},
                {"Title":"AL","Description":"Alabama"},
                {"Title":"NY","Description":"New York"},
                {"Title":"ND","Description":"North Dakota"},
                ]}}
              • Matt Warden
                ... There is caching, but it happens within the call chain of sendQuery, so sendQuery should still fire. Can you put an alert or console output within
                Message 7 of 12 , Apr 12, 2007
                • 0 Attachment
                  On 12 Apr 2007 08:08:21 -0700, daskevin <mrjabba@...> wrote:
                  > I'm not quite understanding your response.
                  > The handler I create does fire as evidenced by an alert box I put
                  > there or by logging it. But, the sendQuery function doesn't fire the
                  > second time. Is it caching the result or something? Is there a way to
                  > reset the Autocomplete control?

                  There is caching, but it happens within the call chain of sendQuery,
                  so sendQuery should still fire. Can you put an alert or console output
                  within sendQuery to confirm that it is being called?



                  --
                  Matt Warden
                  Cleveland, OH, USA
                  http://mattwarden.com


                  This email proudly and graciously contributes to entropy.
                • daskevin
                  I fixed the second click problem. I added a line to my click handler to focus on the autocomplete text field just prior to firing the sendQuery method of the
                  Message 8 of 12 , May 10, 2007
                  • 0 Attachment
                    I fixed the second click problem. I added a line to my click handler
                    to focus on the autocomplete text field just prior to firing the
                    sendQuery method of the autocomplete control.

                    Example (before):

                    function hdlorgu01(e) {
                    orgu01AC.sendQuery("~"); }
                    YAHOO.util.Event.addListener(btorgu01, "click", hdlorgu01);

                    Example (after):

                    function hdlorgu01(e) {
                    document.getElementById("acorgu01").focus();
                    orgu01AC.sendQuery("~"); }
                    YAHOO.util.Event.addListener(btorgu01, "click", hdlorgu01);

                    It was VERY helpful to use the JavaScript debugger in Firebug to find
                    this problem. I stepped through the autocomplete-debug.js script to
                    find where the problem was happening.

                    Cheers,
                    Kevin


                    --- In ydn-javascript@yahoogroups.com, "Matt Warden" <mwarden@...> wrote:
                    >
                    > On 12 Apr 2007 08:08:21 -0700, daskevin <mrjabba@...> wrote:
                    > > I'm not quite understanding your response.
                    > > The handler I create does fire as evidenced by an alert box I put
                    > > there or by logging it. But, the sendQuery function doesn't fire the
                    > > second time. Is it caching the result or something? Is there a way to
                    > > reset the Autocomplete control?
                    >
                    > There is caching, but it happens within the call chain of sendQuery,
                    > so sendQuery should still fire. Can you put an alert or console output
                    > within sendQuery to confirm that it is being called?
                    >
                    >
                    >
                    > --
                    > Matt Warden
                    > Cleveland, OH, USA
                    > http://mattwarden.com
                    >
                    >
                    > This email proudly and graciously contributes to entropy.
                    >
                  • alidadnsi
                    Hi, I m working on yui autocomplete, I m trying to get ride of quanity from autocomplete. For sample: when you type something like deaf on search text filed,
                    Message 9 of 12 , Mar 20, 2008
                    • 0 Attachment
                      Hi, I'm working on yui autocomplete, I'm trying to get ride of quanity
                      from autocomplete.

                      For sample: when you type something like "deaf" on search text filed,
                      and showing show list you see it said "deaf community 1153" my
                      question is that how can i get ride of numbers but keep list of
                      autocomplete!


                      for sample from yahoo.com when you type something on search field you
                      can see the list of keyword but not showing the quanity, how can do
                      that!

                      please help thanks.

                      AM
                    • surynaik@ymail.com
                      Is there a way to show the autocomplete list when the control gets the focus instead of the user having to type the first character? Thanks
                      Message 10 of 12 , May 26, 2009
                      • 0 Attachment
                        Is there a way to show the autocomplete list when the control gets the focus instead of the user having to type the first character?

                        Thanks
                      • lou_tribal
                        Here is the way I did it. var mydataSource = ... mydatasource.doQuery = function(oCallbackFn, sQuery, oParent) { // Override this method to be able to perform
                        Message 11 of 12 , May 26, 2009
                        • 0 Attachment
                          Here is the way I did it.

                          var mydataSource = ...

                          mydatasource.doQuery = function(oCallbackFn, sQuery, oParent) {
                          // Override this method to be able to perform query qhen typing
                          // something in the field AND to return all result when the field
                          // focused and empty.
                          }

                          var myautocomplete = new YAHOO.widget.AutoComplete(myField, myContainer, mydatasource);
                          myautocomplete.textboxFocusEvent.subscribe(_onFocus, this, true);

                          _onFocus = function(){
                          var value = this._field.value;
                          if(value.length === 0) myautocomplete.sendQuery(value);
                          }

                          <

                          --- In ydn-javascript@yahoogroups.com, "surynaik@..." <surynaik@...> wrote:
                          >
                          > Is there a way to show the autocomplete list when the control gets the focus instead of the user having to type the first character?
                          >
                          > Thanks
                          >
                        • Suryakant Naik
                          Thanks Lou. ... From: lou_tribal Subject: [ydn-javascript] Re: Autocomplete To: ydn-javascript@yahoogroups.com Date: Wednesday, May 27,
                          Message 12 of 12 , May 26, 2009
                          • 0 Attachment
                            Thanks Lou.

                            --- On Wed, 5/27/09, lou_tribal <lou_tribal@...> wrote:

                            From: lou_tribal <lou_tribal@...>
                            Subject: [ydn-javascript] Re: Autocomplete
                            To: ydn-javascript@yahoogroups.com
                            Date: Wednesday, May 27, 2009, 1:24 AM

                            Here is the way I did it.

                            var mydataSource = ...

                            mydatasource. doQuery = function(oCallbackF n, sQuery, oParent) {
                            // Override this method to be able to perform query qhen typing
                            // something in the field AND to return all result when the field
                            // focused and empty.
                            }

                            var myautocomplete = new YAHOO.widget. AutoComplete( myField, myContainer, mydatasource) ;
                            myautocomplete. textboxFocusEven t.subscribe( _onFocus, this, true);

                            _onFocus = function(){
                            var value = this._field. value;
                            if(value.length === 0) myautocomplete. sendQuery( value);
                            }

                            &lt;

                            --- In ydn-javascript@ yahoogroups. com, "surynaik@.. ." <surynaik@.. .> wrote:
                            >
                            > Is there a way to show the autocomplete list when the control gets the focus instead of the user having to type the first character?
                            >
                            > Thanks
                            >


                          Your message has been successfully submitted and would be delivered to recipients shortly.