简体   繁体   中英

How do I change YUI Autocomplete textfield Value population Options?

Data:

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

Code:

    <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>

Scenario: I want to display the autocomplete widget with the City, ST zip values, however, the form field myRemoteInput always populates with the selected City, ST zip value.

Question: How do I populate the form field myRemoteInput value with the zipcode when a user selects the City, ST zip value from the autocomplete drop down?

the custom event itemSelectEvent might be what you are looking for. I have never used it myself, but it could be something like

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]
}

Got this from How do I change YUI Autocomplete textfield Value population Options? and adapted it a bit. I have no idea if this works, but it might get you started.

I guess you know the API, but just in case: http://developer.yahoo.com/yui/docs/YAHOO.widget.AutoComplete.html .

hth

Tom

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM