ページロード時にjqueryオートコンプリートコンボボックスに値を設定

Question

jQueryオートコンプリートコンボボックスを使用し、ページがロードされたときに値を入力したい（異なる値）。私のJavaScriptコード：

function setValue() { 
    var filt_lead_name = $("#filt_lead_name").val(); 
    $('.ui-autocomplete-input').val(filt_lead_name); 
    $('.ui-autocomplete-input').autocomplete('close'); 
    return false; 
} 

$("#clicky").click(function() { 
    setValue(); 
}); 

$.widget("custom.combobox", { 
    _create: function() { 
    this.wrapper = $("<span>") 
     .addClass("custom-combobox") 
     .insertAfter(this.element); 
    this.element.hide(); 
    this._createAutocomplete(); 
    this.element.bind("change", function() { 
     input.val($(select).find("option:selected").text()); 
    }); 
    }, 

    _createAutocomplete: function() { 
    var selected = this.element.children(":selected"), 
     value = selected.val() ? selected.text() : ""; 
    this.input = $("<input>") 
     .appendTo(this.wrapper) 
     .val(value) 
     .attr("title", "") 
     .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left") 
     .autocomplete({ 
     delay: 0, 
     minLength: 0, 
     source: $.proxy(this, "_source"), 
     }) 
     .tooltip({ 
     classes: { 
      "ui-tooltip": "ui-state-highlight" 
     } 
     }); 
    this._on(this.input, { 
     autocompleteselect: function(event, ui) { 
     ui.item.option.selected = true; 
     this._trigger("select", event, { 
      item: ui.item.option 
     }); 
     }, 
     autocompletechange: "_removeIfInvalid" 
    }); 
    }, 

    _source: function(request, response) { 
    var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
    response(this.element.children("option").map(function() { 
     var text = $(this).text(); 
     if (this.value && (!request.term || matcher.test(text))) 
     return { 
      label: text, 
      value: text, 
      option: this 
     }; 
    })); 
    }, 

    _removeIfInvalid: function(event, ui) { 
    // Selected an item, nothing to do 
    if (ui.item) { 
     return; 
    } 

    // Search for a match (case-insensitive) 
    var value = this.input.val(), 
     valueLowerCase = value.toLowerCase(), 
     valid = false; 
    this.element.children("option").each(function() { 
     if ($(this).text().toLowerCase() === valueLowerCase) { 
     this.selected = valid = true; 
     return false; 
     } 
    }); 

    // Found a match, nothing to do 
    if (valid) { 
     return; 
    } 

    // Remove invalid value 
    this.input 
     .val("") 
     .attr("title", value + " didn't match any item") 
     .tooltip("open"); 
    this.element.val(""); 
    this._delay(function() { 
     this.input.tooltip("close").attr("title", ""); 
    }, 2500); 
    this.input.autocomplete("instance").term = ""; 
    }, 

    _destroy: function() { 
    this.wrapper.remove(); 
    this.element.show(); 
    } 
}); 

$("#combobox").combobox({ 
    select: function(event, ui) { 
    var text = $("#combobox option:selected").text(); 
    var res = text.split(" "); 
    $("#filt_lead_name").val(res[0]); 
    $("#filt_lead_name").keyup(); 
    } 
}); 

$("#toggle").on("click", function() { 
    $("#combobox").toggle(); 
}); 

私のhtml：

<div class="ui-widget"> 
    <select id="combobox"> 
    <option value="">Select one...</option> 
    <option value="Becker Patrick">Becker Patrick</option> 
    <option value="Orfei Jürg">Orfei Jürg</option> 
    </select> 
</div> 

私はそれが入力に値を設定します手動$("#clicky").click()関数を呼び出します。しかし、ページの読み込みには値を設定しません。 setValue()を実行しようとしましたが、クリックせずに動作しません。

この問題を解決し、値を入力するのを手伝ってください。ありがとう！

Answer 1

を変更し、次のコード：

$("#clicky").click(function() { 
    setValue(); 
}); 

のでDOMではなく、クリックの準備ができたときにそれが値を設定することができ

$(document).ready(function(){ 
    setValue(); 
}); 

へ。