根据数组中的数据创建搜索列表

时间：2017-03-13 13:45:39

标签： javascript jquery twitter-bootstrap

我有一个数组，应该用于在搜索字段旁边创建一个搜索引擎列表。

我有这个正在运行的脚本。但是，它会生成一个选项框 - 您输入搜索短语，选择引擎，然后获得结果。但是，由于我必须将标记更改为使用Bootstrap，我需要将选择框更改为无序列表，如下所示：

<ul class="dropdown-menu">
   <li class="selected">Select</li>
   <li>Google</li>
   <li>Nyheder</li>
   <li>Studier</li>
 </ul>

如果我尝试将选择更改为<ul id="global_search_filter" class="search_filter"></ul>和var option = jQuery(document.createElement("option"));更改为var option = jQuery(document.createElement("li"));，则脚本会中断。

如何实现相同的功能，但是将标记从选择框更改为带有列表选项的无序列表？

我创建了一个fiddle here。

也许有人可以指出我如何解决这个问题的正确方向。

＆＃13;
＆＃13; 
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);
          }
        }
      });
    }
  });
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

工作 Jsfiddle 。

以下是您的代码的修改版本（很遗憾，您无法在Stack Overflow上提交表单，但您可以测试上面的jsfiddle ）。将使用explications更新imediatelly：

更新：

好的，让我们看看我们在这里做了什么：

  • 首先，我们用ul容器
    • 替换select
  • 我们将li元素附加到ul父
  • 我们在每个data-selected元素上添加li自定义属性，其值为空值，但我们添加所选值的第一个除外。
  • 我们将data-value元素添加到li元素以复制值，就像我们有select选项值一样。
  • 点击动态添加的li元素后，我们使用事件委派以动态方式绑定点击事件，以添加selected属性值。
  • 点击li元素后，我们还会将所选值名称添加到Bootstrap按钮。

＆＃13;
＆＃13; 
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;
  };
  $(document).on('click', 'li', function() {
    $('li[data-selected="selected"]').attr('data-selected', '');
    $(this).attr('data-selected', 'selected');
    $("#menu").text($(this).text());
    $("#menu").val($(this).text());
  })
  var forms = jQuery("form.search_form");
  forms.each(function() {
    var form = jQuery(this);
    var field = form.find("input.search_query");
    var filter = form.find(".dropdown-menu");
    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("li"));
        option.text(engine.label);
        option.attr('data-value', i);
        if (i == 0) {
          option.attr('data-selected', 'selected');
        } else {
          option.attr('data-selected', '');
        }
        option.attr('role', 'presentation');
        if (!resetForm && isEngineCurrent(engine)) {
          option.attr("selected", "selected");
          field.val(getUrlParameter(engine.querykey));
        }
        filter.append(option);
      }
      form.submit(function(event) {
        var chosenEngine = window.searchEngines[$('li[data-selected="selected"]').data('value')];
        console.log(chosenEngine);
        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);
          }
        }
      });
    }
  });
});
＆＃13; 
li[data-selected="selected"] {
  color: #F00;
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.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 +">
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="menu" data-toggle="dropdown">Choose option
   <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu">
    </ul>
  </div>
  <button name="sa" id="submit-button" type="submit">Search</button>
</form>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题