Question

目标：我想将setValue和getValue函数添加到JQueryUI自动完成小部件。

假设自动填充列表的数据源为id / label对，我想要调用setValue和getValue，如下所示：

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

这是上下文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>

和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
    });
});

这是一个jsfiddle开始： http://jsfiddle.net/spencerw/55jhx/149/

Answer 1

好的，所以我改变了一点，但我觉得它更好。请以您认为合适的任何方式随意使用。

您会注意到我向按钮添加了更多属性（ele同时添加了value并将ele添加到了设置器中。 <input>属性应设置为要修改/检索结果的value元素的ID。 availableTags属性（在setter中）应该设置为要显示标签的availableTags对象的id属性（不是onclick数组中对象的索引）。我拿出<script>属性，并在JS中处理它，所以我可以从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>标签（这更像是为了让它更容易在jsFiddle中阅读）

以下是修改过的HTML：

$(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
    });
});

修改过的JavaScript：

authenticate_user!

您可以在此处查看答案的工作，超级文档版本： http://jsfiddle.net/hftn7oqw/

将setValue和getValue添加到JQueryUI自动完成

1 个答案: