0
検索フィールドの隣に検索エンジンのリストを作成するために使用する配列があります。配列からのデータに基づいて検索リストを作成する
私はこのスクリプトを使用しています。ただし、オプションの選択ボックスが生成されます。検索語句を入力してエンジンを選択し、結果を取得します。私はブートストラップを使用しているとマークアップを変更する必要があるためしかし、私はこのように、順不同リストに選択ボックスを変更する必要があります。
<ul class="dropdown-menu">
<li class="selected">Select</li>
<li>Google</li>
<li>Nyheder</li>
<li>Studier</li>
</ul>
私はvar option = jQuery(document.createElement("li"));に<ul id="global_search_filter" class="search_filter"></ul>とvar option = jQuery(document.createElement("option"));に選択を変更しようとした場合スクリプトが壊れます。
同じ機能を実現するにはどうすればよいですか？マークアップを選択ボックスからリストオプション付きの順序付けられていないリストに変更するにはどうすればよいですか？
私はfiddle hereを作成しました。
誰かがこれを解決する方法について正しい方向で私を指摘することができます。 Jsfiddle作業
el = document.getElementById("localdomain");
el.value = window.location.hostname;
if (!window.searchEngines) {
window.searchEngines = [{
"url": "https://www.google.com",
"label": "Google",
"querykey": "q",
"id": "allWeb"
}, {
"url": "https://www.bing.com",
"label": "Bing",
"querykey": "q",
"id": "bing",
"param": {
"doctype": "",
"path": "",
"cms_mode": ""
}
}, {
"url": "https://www.yahoo.com",
"label": "Yahoo",
"querykey": "q",
"id": "yahoo",
"param": {
"gcse": "014167723083474301078:sxgnobjpld4"
}
}];
}
window.searchCallbacks = [];
jQuery(function() {
var stripPath = function(path) {
return path === "/" ? path : path.replace(/\/$/, "");
};
var isEngineCurrent = function(engine) {
if (stripPath(engine.url) !== stripPath(document.location.origin + document.location.pathname)) {
return false;
}
if (engine.param) {
for (var key in engine.param) {
if (getUrlParameter(key) !== engine.param[key]) {
return false;
}
}
}
return true;
};
var forms = jQuery("form.search_form");
forms.each(function() {
var form = jQuery(this);
var field = form.find("input.search_query");
var filter = form.find(".search_filter");
var resetForm = form.hasClass("search_reset");
if (window.searchEngines) {
for (var i = 0; i < window.searchEngines.length; i++) {
var engine = window.searchEngines[i];
var option = jQuery(document.createElement("option"));
option.text(engine.label);
option.val(i);
if (!resetForm && isEngineCurrent(engine)) {
option.attr("selected", "selected");
field.val(getUrlParameter(engine.querykey));
}
filter.append(option);
}
form.submit(function(event) {
var chosenEngine = window.searchEngines[filter.val()];
form.attr("action", chosenEngine.url);
form.attr("method", chosenEngine.method || "GET");
field.attr("name", chosenEngine.querykey);
if (chosenEngine.param) {
for (var paramName in chosenEngine.param) {
var input = jQuery(document.createElement("input"));
input.attr("type", "hidden");
input.attr("name", paramName);
input.val(chosenEngine.param[paramName]);
form.append(input);
}
}
for (var i = 0; i < window.searchCallbacks.length; i++) {
var callback = window.searchCallbacks[i];
if (jQuery.isFunction(callback)) {
callback(chosenEngine, this);
}
}
});
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="global_search_form" class="search_form search_reset" target="_blank">
<input type="text" id="global_search_query" class="search_query" placeholder="Search where...?">
<input id="localdomain" name="localdomain" type="hidden" value=" + window.location.hostname + ">
<select id="global_search_filter" class="search_filter"></select>
<button name="sa" id="submit-button" type="submit">Search</button>
</form>
あなたが順不同リストについては、試したコードを投稿してください。 'li'要素に値の属性がなく、' li'を 'select'に追加できません。 @Samy、それはjQueryで要素を作成する方法ではありません。それは要素をどのようにターゲットにするのか、あなたの場合は変数に入れます。 – Ionut
@Ionut私が試したことを含めて私の質問を更新しました。私は李が選択された属性を持つことができないことを知っていますが、これを行うもう1つの方法は何ですか？ – Meek