【问题标题】:How do I change YUI Autocomplete textfield Value population Options?如何更改 YUI 自动完成文本字段值填充选项?
【发布时间】:2009-09-24 12:50:14
【问题描述】:

数据:

JACKSON, MS 39212|39212
BAINVILLE, MT 59212|59212
CROOKSTON, NE 69212|69212
COLUMBIA, SC 29212|29212
SPOKANE, WA 99212|99212

代码:

    <form method="GET" target="_blank">
        <fieldset><legend>remote example</legend>
        <label for="myRemoteInput">Enter a state:</label>
        <div id="myRemoteAutoComplete">
                <input id="myRemoteInput" name="myRemoteInput" type="text">
                <div id="myRemoteContainer"></div>
        </div>
        </fieldset>
        <input type="submit" />
    </form>
<script type="text/javascript">
YAHOO.example.BasicRemote = function() {
    var oRDS = new YAHOO.util.XHRDataSource("data.php");
    oRDS.responseType = YAHOO.util.XHRDataSource.TYPE_TEXT;
    oRDS.responseSchema = {
        recordDelim: "\n",
        fieldDelim: "|"
    };
    oRDS.maxCacheEntries = 5;
    var oRAC = new YAHOO.widget.AutoComplete("myRemoteInput"
        , "myRemoteContainer"
        , oRDS
        , {minQueryLength: 2,maxResultsDisplayed: 25, forceSelection: true});

    return {
        oRDS: oRDS,
        oRAC: oRAC
    };
}();
</script>

场景: 我想显示带有 City, ST zip 值的自动完成小部件,但是,表单字段 myRemoteInput 始终使用选定的 City, ST zip 值填充。

问题: 当用户从自动完成下拉菜单中选择 City, ST zip 值时,如何使用邮政编码填充表单字段 myRemoteInput 值?

【问题讨论】:

    标签: javascript ajax autocomplete yui widget


    【解决方案1】:

    自定义事件 itemSelectEvent 可能是您正在寻找的。我自己从未使用过它,但它可能类似于

    oRAC.itemSelectEvent.subscribe(onItemSelect);
    
    function onItemSelect(oSelf , elItem , oData) {
        var locationData = oData[0];
        // Now parse location data and put only the ZIP code back into oData[0]
    }
    

    How do I change YUI Autocomplete textfield Value population Options? 得到这个并稍作调整。我不知道这是否有效,但它可能会让你开始。

    我猜你知道 API,但以防万一:http://developer.yahoo.com/yui/docs/YAHOO.widget.AutoComplete.html

    汤姆

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-02-09
      • 2011-02-01
      • 1970-01-01
      • 1970-01-01
      • 2019-01-11
      • 2014-06-11
      相关资源
      最近更新 更多