Search code examples
autocompleteyuiyui3

YUI 3 Autocomplete Textbox Value Change


The question I have is how I would be able to change the value that is set in the text box that the autocomplete is linked to. The task I am attempting to do is to convert from YUI 2 to YUI 3. Please don't say that I shouldn't do that... because It isn't my choice. I am aware... The code below is what was used before. I already have the autocomplete functionality doing most of what it needs to do. It's just when it gets to the field.itemSelectEvent.subscribe(myHandler) part that I can no longer get anything else to work. The list comes up with the persons information but when selected it just puts [object Object] in the text box instead of their name that automatically forwards to another page. Thank you for your help!!!

var field = new YAHOO.widget.AutoComplete("webUserSearch",
    "webUserSearchContainer", oDS);
field.highlightClassName = "autoCompleteHighlight";
field.useShadow = true;
field.queryMatchContains = true;
field.maxResultsDisplayed = 20;
field.resultTypeList = false;

field.formatResult = function(oResultData, sQuery) {
    return "<div class=\"result\"><u style=\"cursor:pointer\">"
        + oResultData['Last Name'] + ", " + oResultData['First Name']
        + "</u> (" + oResultData['User Name'] + ")</div>";
};

var myHandler = function(sType, aArgs) {
    var theField = aArgs[0];
    var selectedElement = aArgs[1];
    var repObject = aArgs[2];
    theField.getInputEl().value = repObject['Last Name'] + ", "
        + repObject['First Name'];

    var newTabURL = <URL Removed for Stack Overflow>;
    window.location.href = newTabURL;
};
field.itemSelectEvent.subscribe(myHandler);

Solution

  • resultTextLocator was the ticket. All I had to do was to return the value I wanted to display in the box.

    resultTextLocator : function (result) {
                            return result["Last Name"] + 
                            ', ' + 
                            result["First Name"];
                        }