Add setValue and getValue to JQueryUI Autocomplete

Question

Goal: I want to add setValue and getValue functions to JQueryUI Autocomplete widget.

Assuming an autocomplete list has a datasource of id/label pairs, I want to call to setValue and getValue like this:

// this is how I *want* to call it
$("#tags").autocomplete('setValue', 2);  // should select "two" in the list
$("#tags").autocomplete('getValue')      // if "two" is selected, it should return 2

Here's the context HTML:

<script>
    // if I pass in 2 for the id, it should select "two"
    function setValueClick(){
       $("#tags").autocomplete('setValue', 2);
    }

    // if "two" is the selected item, getValue should return 2
    function getValueClick(){
        console.log($("#tags").autocomplete('getValue'));
    }
</script>

<div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags" /> <br/>

    <button onclick="setValueClick()">Set value to 2</button>
    <button onclick="getValueClick()">Get value</button>
</div>

and the JS:

$.widget("ui.autocomplete", $.ui.autocomplete, {
    setValue: function(id) {
        // TODO: make this select the item corresponding to the id param
    },
    getValue: function(){
        // TODO: make this return the id of the selected item
    }
});


$(function() {
    var availableTags = [
        {   id: 1,
            label: 'one'
        },
        {
            id: 2,
            label: 'two'
        },
        {
            id: 3,
            label: 'three'
        }
    ];

    $("#tags").autocomplete({
        source: availableTags
    });
});

And here's a jsfiddle start: http://jsfiddle.net/spencerw/55jhx/149/

Answer 1

Okay, so I changed things up a little bit, but I feel it's for the better. Feel free to use this in any way you see fit.

You'll notice I added more attributes to the buttons (ele to both and value to the setter). The ele property should be set to the ID of the <input> element you want to modify/retrieve results from. The value property (in the setter) should be set to the id attribute of the availableTags object that you want to show the label of (not the index of the object within the availableTags array). I took out the onclick attributes, and am handling that in the JS, so I could remove the <script> tags from the HTML pane (this is more just to make it a little easier to read in jsFiddle).

Here's the modified HTML:

<div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags" /> <br/>

    <button class='setValueClick' value='2' ele='tags'>Set value to 2</button>
    <button class='getValueClick' ele='tags'>Get value</button>
</div>

And the modified JavaScript:

$(document).on('click', 'button.setValueClick', function(){
    var ele = $('#' + $(this).attr('ele'));
    ele.autocomplete('setValue', $(this).attr('value'));
});
$(document).on('click', 'button.getValueClick', function(){
    var ele = $('#' + $(this).attr('ele'));
    alert(ele.autocomplete('getValue'));
});

$(function() {
    var availableTags = [
        { id: 1, label: 'one' },
        { id: 2, label: 'two' },
        { id: 3, label: 'three' }
    ];

    $.widget("ui.autocomplete", $.ui.autocomplete, {
        setValue: function(id) {
            var input = $(this.element[0]);
            $.each(availableTags, function(k, v){
                if(v.id == id){
                    input.val(v.label);
                    return false;
                }
            });
        },
        getValue: function(){
            var val = $(this.element[0]).val(), ret = false;
            $.each(availableTags, function(k, v){
                if(v.label == val){
                    ret = v.id;
                    return false;
                }
            });
            return ret;
        }
    });

    $("#tags").autocomplete({
        source: availableTags
    });
});

You can see a working, super-documented, version of the answer here: http://jsfiddle.net/hftn7oqw/