0

AutoComplete

Hi all,
I want to build a autocomplete textbox in YAP.
I use YUI 2.8.0 to build it but my application was very slowly.
Can i do other way ? Help me
Thanks alot !

by
3 Replies
  • Hi Pham,

    YUI would be one of the best methods for adding autocomplete functionality to a YAP application. Is it slow to drop down a box when implemented? Could you post a sample of the code that you are using? I can take a look to see if we can resolve the issue.

    Jonathan LeBlanc
    Technology Evangelist
    Yahoo! Developer Network
    Twitter: jcleblanc
    0
  • QUOTE (Jonathan LeBlanc @ Nov 4 2009, 05:47 PM) <{POST_SNAPBACK}>
    Hi Pham,

    YUI would be one of the best methods for adding autocomplete functionality to a YAP application. Is it slow to drop down a box when implemented? Could you post a sample of the code that you are using? I can take a look to see if we can resolve the issue.

    Jonathan LeBlanc
    Technology Evangelist
    Yahoo! Developer Network
    Twitter: jcleblanc


    Hi Jonathan, Sorry about my late,
    This is my example:
    //Fist is my css:
    <style type="text/css">
    .yui-skin-sam .yui-ac{position:relative;font-family:arial;font-size:100%;}.yui-skin-sam .yui-ac-input{width:100%;}.yui-skin-sam .yui-ac-container{position:absolute;top:1.6em;width:100%;}.yui-skin-sam .yui-ac-content{position:absolute;width:100%;border:1px solid #808080;background:#fff;overflow:hidden;z-index:9050;}.yui-skin-sam .yui-ac-shadow{position:absolute;margin:.3em;width:100%;background:#000;-moz-opacity:.10;opacity:.10;filter:alpha(opacity=10);z-index:9049;}.yui-skin-sam .yui-ac iframe{opacity:0;filter:alpha(opacity=0);padding-right:.3em;padding-bottom:.3em;}.yui-skin-sam .yui-ac-content ul{margin:0;padding:0;width:100%;}.yui-skin-sam .yui-ac-content li{margin:0;padding:2px 5px;cursor:default;white-space:nowrap;list-style:none;zoom:1;}.yui-skin-sam .yui-ac-content li.yui-ac-prehighlight{background:#B3D4FF;}.yui-skin-sam .yui-ac-content li.yui-ac-highlight{background:#426FD9;color:#FFF;}
    #myAutoComplete {
    width:15em;

    }
    </style>
    0
  • //my javascript
    <script type="text/javascript">
    // yahoo-dom-event.js

    //datasource-min.js

    //autocomplete-min.js
    //data.js
    YAHOO.example.Data = {
    arrayStates: [
    "AAM",
    "ABI",
    "ABT",
    "ACB",
    "ACE",
    "ACL",
    "AGC",
    "AGF",
    "ALP",
    "ALT",
    "API",
    "APS",
    "ASP",
    "ATA",
    "B82",
    "BAF",
    "BAS",
    "BBC",
    "BBS",
    "BBT",
    "BCC",
    "BCI",
    "BED",
    "BF1",
    "BHC",
    "BHE",
    "BHS",
    "BHV",
    "BKC",
    "BLF",
    "BMC",
    "BMI",
    "BMP",
    "BPC",
    "BSA",
    "BST",
    "BT6",
    "BTC",
    "BTH",
    "BTS"

    ]
    };
    </script>
    0
  • // next is html

    <div class="yui-skin-sam">
    <div id="myAutoComplete">
    <input id="query" type="text" value="ABT">
    <div id="myContainer">
    </div>
    </div>
    </div> <div id="valid" style="color: red"></div>


    //complete is jsscript for reg autocomplete

    <script language="JavaScript" type="text/javascript">
    YAHOO.example.BasicLocal = function() {
    var oDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.arrayStates);
    oDS.responseSchema = {fields : ["state"]};
    oDS.maxCacheEntries = 5;
    var oAC = new YAHOO.widget.AutoComplete("query", "myContainer", oDS);
    oAC.prehighlightClassName = "yui-ac-prehighlight";
    oAC.useShadow = false
    ;
    return {
    oDS: oDS,
    oAC: oAC
    };
    }();
    </script>

    ---------------- It run but when i press a key, dropdown list for auto complete show so slowly. How can i make it show faster hic hic.
    Thanks alot
    0

Recent Posts

in YAP