Добавить setValue и getValue в JQueryUI Autocomplete

Question

Цель: Я хочу добавить функции setValue и getValue в виджет автозаполнения JQueryUI.

Предполагая, что список автозаполнения имеет источник данных пар идентификатор/метки, я хочу звонить в 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 
    }); 
}); 

И вот jsf iddle start: http://jsfiddle.net/spencerw/55jhx/149/

Answer 1

Хорошо, поэтому я немного изменил ситуацию, но я чувствую, что к лучшему. Не стесняйтесь использовать это так, как вы считаете нужным.

Вы заметите, что добавлены дополнительные атрибуты кнопкам (ele для обоих и value для сеттера). Свойству ele должно быть присвоено идентификатор элемента <input>, из которого вы хотите изменить/получить результаты. Свойство value (в сеттер) должно быть установлено в атрибут id объекта availableTags, для которого вы хотите показать метку (а не индекс объекта в массиве availableTags). Я вынул атрибуты onclick и обрабатываю это в JS, поэтому я могу удалить теги <script> из панели HTML (это более просто, чтобы сделать его немного легче читать в jsFiddle).

Вот модифицированный 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> 

И модифицированное 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 
    }); 
}); 

Вы можете увидеть работу, супер документированы, вариант ответа здесь: http://jsfiddle.net/hftn7oqw/