當頁面加載時將值設置爲jquery自動完成組合框

我使用jQuery自動完成組合框並希望在頁面加載時設置輸入值（不同的值）。我的JavaScript代碼：當頁面加載時將值設置爲jquery自動完成組合框

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()，但沒有點擊它不起作用。

請幫我解決這個問題並設置好輸入值。謝謝！

來源

2017-05-16 Nastya Nastya

在'$（document）.ready（）'內調用'setValue（）'。如果在頁面加載時調用它，而DOM結構尚未完全加載，那麼'setValue（）'函數中的Jquery代碼將無法執行。 –

更改下面的代碼：

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

到

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

，以便它可以設定的值時DOM準備的，而不是點擊。

來源

2017-05-16 11:53:46

當頁面加載時將值設置爲jquery自動完成組合框

回答

相關問題