javascript - 将表格添加到搜索结果自动完成下拉列表

Question

TLDR；如何在自动完成搜索下拉列表的左侧添加表格，如下图所示？

我的标题中有一个搜索栏，它使用 JS 函数根据一小部分示例产品自动完成。

我需要在下拉预览中添加标题和表格，但不知道在哪里插入 HTML，以便在搜索栏中输入内容时它会填充。

现在我已经对该示例的右侧进行了编码并正常运行。代码包含在下面。

HTML

        <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9 search-block">
                        <div class="row">
  <form class="navbar-form suggest-holder">
   <input class="form-control input-lg suggest-prompt" type="text" placeholder="Search...">
     <select class="form-control input-lg">
      <option>All</option>
      <option>one</option>
      <option>two</option>
      <option>three</option>
      <option>four</option>
      <option>five</option>  

      <button type="submit" class="btn btn-primary btn-lg">Go</button>

      <ul></ul>
  </form>
</div>

CSS:

 .form-control {
 float: left;
 }

 .suggest-holder {

input {
    border: 1px solid $gray-lighter;
}

ul {
    list-style: none;
    border: 1px solid $gray-lighter;
    background-color: white;

    width:65%;
}

li {
    padding: 5px;
     position: inherit;
}

li:hover {
    cursor: pointer;
}

li:hover, li.active {
    background: rgba(100,100,100,.2);
}
}

.suggest-name {
font-weight: bold;
display: block;
margin-left: 40px;
}

.suggest-sku {
font-style: italic;
font-size:$font-size-small;
color: $gray-light;
}

.suggest-image {
height: 35px;
float: left;
padding-right: 5px;
margin-top: -20px;
}    

header .search-block {

input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    width: 65% !important;

    @media (max-width:$screen-xs) {
        width: 47% !important;
    }
}

select {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding-top: 5px;
    padding-left: 5px;
    padding-bottom: 5px;
    padding-right: 5px;
    margin-left: -5px;
    width: 20% !important;

    @media (max-width:$screen-xs) {
        width: 30% !important;
    }
}

button {
    vertical-align: top;
    width: 14% !important;

    @media (min-width:$screen-lg) {
        width: 8% !important;
    }

    @media (max-width:$screen-xs) {
        width: 21% !important;
    }
}
.form-group {
    > form {
        > * {
            display: inline-block;
        }

        @media (max-width:$screen-xs) {
            text-align: center;
            margin-left: 0;
            margin-right: 0;
            @include pad-sides(0);
        }
    }
}
}
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

JS

var data = [
                {
                    image: src = "http://placehold.it/35x35",
                    name: 'apples',
                    sku: '61583318'
                },
                {
                    image: src = "http://placehold.it/35x35",
                    name: 'oranges',
                    sku: '924335'
                },
                {
                    image: src = "http://placehold.it/35x35",
                    name: 'grapes',
                    sku: '73940'
                },
                {
                    image: src = "http://placehold.it/35x35",
                    name: 'strawberries',
                    sku: '66155'
                },
                {
                    image: src = "http://placehold.it/35x35",
                    name: 'string beans',
                    sku: '112509'
                },
                {
                    image: src = "http://placehold.it/35x35",
                    name: 'apricot',
                    sku: '112984'
                }
            ];

            // Suggest section holder
            var $suggestedHL = $('.suggest-holder');
            // Suggestions UL
            var $suggestedUL = $('ul', $suggestedHL);
            // Suggestions LI
            var $suggestedLI = $('li', $suggestedHL);
            // Selected Items UL
            var $selectedUL = $('#selected-suggestions');
            // Keyboard Nav Index
            var index = -1;

            function addSuggestion(el){
                $selectedUL.append($('<li>' + el.find('.suggest-name').html() + '</li>'));
            }

            $('input', $suggestedHL).on({
                keyup: function(e){
                    var m = false;
                    if(e.which == 38){
                        if(--index < 0){
                            index = 0;
                        }

                        m = true;
                    }else if(e.which == 40){
                        if(++index > $suggestedLI.length - 1){
                            index = $suggestedLI.length-1;
                        }

                        m = true;
                    }

                    if(m){
                        // Remove the active class
                        $('li.active', $suggestedHL).removeClass('active');
                        $suggestedLI.eq(index).addClass('active');
                    }else if(e.which == 27){
                        index = -1;
                        // Esc key
                        $suggestedUL.hide();
                    }else if(e.which == 13){
                        // Enter key
                        if(index > -1){
                            addSuggestion($('li.active', $suggestedHL));
                            index = -1;
                            $('li.active', $suggestedHL).removeClass('active');
                        }
                    }else{
                        index = -1;
                        // Clear the ul
                        $suggestedUL.empty();

                        // Cache the search term
                        $search = $(this).val();

                        // Search regular expression
                        $search = new RegExp($search.replace(/[^0-9a-z_]/i), 'i');

                        // Loop through the array
                        for(var i in data){
                            if(data[i].name.match($search)){
                                $suggestedUL.append($("<li><span class='suggest-name'>" + data[i].name + "</span><span class='suggest-sku'>" + data[i].sku + "</span><img src=" + data[i].image + " class='suggest-image'/></li>"));
                            }
                        }


                        // Show the ul
                        $suggestedUL.show();
                    }
                    if($(this).val() == ''){
                        $suggestedUL.hide();
                    }
                },
                keydown: function(e){
                    if(e.which == 38 || e.which == 40 || e.which == 13){
                        e.preventDefault();
                    }
                },
                focus: function(e){
                    if($(this).val() != ''){
                        $suggestedUL.show();
                    }
                }
            });

            $suggestedHL.on('click', 'li', function(e){
                addSuggestion($(this));
            });

            $('body').on('click', function(e) {
                if (!$(e.target).closest('.suggest-holder li, .suggest-holder input').length) {
                    $suggestedUL.hide();
                };
            });

https://jsfiddle.net/sox0sxmz/1/

Answer 1

只是想帮助你开始，你必须在以后改进它。

JS 已更新(这是为了更新 span 在 html 中有类 leftspan，所以把你想更新的任何东西放在 HTML 中):

  // update the left box below search
  $('.leftspan').html('<span class="searching"><b>' + $('.suggest-prompt').val() + '</b></span><i> in Category XXX</i>');

添加了 HTML(您可以看到结构更新为一个 div 容器包裹了 leftspan 和结果 ul block (使用 inline-block 所以它们保持在同一行)):

<form class="navbar-form suggest-holder">
      <input class="form-control input-lg suggest-prompt" type="text" placeholder="Search...">
      <select class="form-control input-lg">
        <option>All</option>
        <option>one</option>
        <option>two</option>
        <option>three</option>
        <option>four</option>
        <option>five</option>
      </select>
      <button type="submit" class="btn btn-primary btn-lg">Go</button>
      <div>
        <div class="leftspan"></div>
        <ul class="inlineblock">
        </ul>
      </div>
    </form>

添加了 CSS:

.inlineblock {
  display: inline-block;
}

.leftspan {
  margin: 15px;
  display: inline-block;
  float: left;
}

.searching {
  color: #428bca; /* blue */
}

工作示例:

var data = [{
  image: src = "http://placehold.it/35x35",
  name: 'apples',
  sku: '61583318'
}, {
  image: src = "http://placehold.it/35x35",
  name: 'oranges',
  sku: '924335'
}, {
  image: src = "http://placehold.it/35x35",
  name: 'grapes',
  sku: '73940'
}, {
  image: src = "http://placehold.it/35x35",
  name: 'strawberries',
  sku: '66155'
}, {
  image: src = "http://placehold.it/35x35",
  name: 'string beans',
  sku: '112509'
}, {
  image: src = "http://placehold.it/35x35",
  name: 'apricot',
  sku: '112984'
}];

// Suggest section holder
var $suggestedHL = $('.suggest-holder');
// Suggestions UL
var $suggestedUL = $('ul', $suggestedHL);
// Suggestions LI
var $suggestedLI = $('li', $suggestedHL);
// Selected Items UL
var $selectedUL = $('#selected-suggestions');
// Keyboard Nav Index
var index = -1;

function addSuggestion(el) {
  $selectedUL.append($('<li>' + el.find('.suggest-name').html() + '</li>'));
}

$('input', $suggestedHL).on({
  keyup: function(e) {
    var m = false;
    if (e.which == 38) {
      if (--index < 0) {
        index = 0;
      }

      m = true;
    } else if (e.which == 40) {
      if (++index > $suggestedLI.length - 1) {
        index = $suggestedLI.length - 1;
      }

      m = true;
    }

    if (m) {
      // Remove the active class
      $('li.active', $suggestedHL).removeClass('active');
      $suggestedLI.eq(index).addClass('active');
    } else if (e.which == 27) {
      index = -1;
      // Esc key
      $suggestedUL.hide();
    } else if (e.which == 13) {
      // Enter key
      if (index > -1) {
        addSuggestion($('li.active', $suggestedHL));
        index = -1;
        $('li.active', $suggestedHL).removeClass('active');
      }
    } else {
      index = -1;
      // Clear the ul
      $suggestedUL.empty();

      // Cache the search term
      $search = $(this).val();

      // Search regular expression
      $search = new RegExp($search.replace(/[^0-9a-z_]/i), 'i');

			// update the left box below search
      $('.leftspan').html('<span class="searching"><b>' + $('.suggest-prompt').val() + '</b></span><i> in Category XXX</i>');
      // Loop through the array
      for (var i in data) {
        if (data[i].name.match($search)) {
          $suggestedUL.append($("<li><span class='suggest-name'>" + data[i].name + "</span><span class='suggest-sku'>" + data[i].sku + "</span><img src=" + data[i].image + " class='suggest-image'/></li>"));
        }
      }


      // Show the ul
      $suggestedUL.show();
    }
    if ($(this).val() == '') {
      $suggestedUL.hide();
    }
  },
  keydown: function(e) {
    if (e.which == 38 || e.which == 40 || e.which == 13) {
      e.preventDefault();
    }
  },
  focus: function(e) {
    if ($(this).val() != '') {
      $suggestedUL.show();
    }
  }
});

$suggestedHL.on('click', 'li', function(e) {
  addSuggestion($(this));
});

$('body').on('click', function(e) {
  if (!$(e.target).closest('.suggest-holder li, .suggest-holder input').length) {
    $suggestedUL.hide();
  };
});

//SEARCH FILTER PREVIEW//
.suggest-holder {
  input {
    border: 1px solid $gray-lighter;
  }
  ul {
    list-style: none;
    border: 1px solid $gray-lighter;
    background-color: white;
    width: 65%;
  }
  li {
    padding: 5px;
    position: inherit;
  }
  li:hover {
    cursor: pointer;
  }
  li:hover,
  li.active {
    background: rgba(100, 100, 100, .2);
  }
}

.suggest-name {
  font-weight: bold;
  display: block;
  margin-left: 40px;
}

.suggest-sku {
  font-style: italic;
  font-size: $font-size-small;
  color: $gray-light;
}

.suggest-image {
  height: 35px;
  float: left;
  padding-right: 5px;
  margin-top: -20px;
}

header .search-block {
  input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    width: 65% !important;
    @media (max-width: $screen-xs) {
      width: 47% !important;
    }
  }
  select {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding-top: 5px;
    padding-left: 5px;
    padding-bottom: 5px;
    padding-right: 5px;
    margin-left: -5px;
    width: 20% !important;
    @media (max-width: $screen-xs) {
      width: 30% !important;
    }
  }
  button {
    vertical-align: top;
    width: 14% !important;
    @media (min-width: $screen-lg) {
      width: 8% !important;
    }
    @media (max-width:$screen-xs) {
      width: 21% !important;
    }
  }
  .form-group {
    > form {
      > * {
        display: inline-block;
      }
      @media (max-width:$screen-xs) {
        text-align: center;
        margin-left: 0;
        margin-right: 0;
        @include pad-sides(0);
      }
    }
  }
}


input:focus::-webkit-input-placeholder {
  color: transparent;
}

input:focus:-moz-placeholder {
  color: transparent;
}


/* FF 4-18 */

input:focus::-moz-placeholder {
  color: transparent;
}


/* FF 19+ */

input:focus:-ms-input-placeholder {
  color: transparent;
}


/* IE 10+ */






.inlineblock {
  display: inline-block;
}

.leftspan {
  margin: 15px;
  display: inline-block;
  float: left;
}

.searching {
  color: #428bca; /* blue */
}

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-9 search-block">
  <div class="row">
    <form class="navbar-form suggest-holder">
      <input class="form-control input-lg suggest-prompt" type="text" placeholder="Search...">
      <select class="form-control input-lg">
        <option>All</option>
        <option>one</option>
        <option>two</option>
        <option>three</option>
        <option>four</option>
        <option>five</option>
      </select>
      <button type="submit" class="btn btn-primary btn-lg">Go</button>
      <div>
        <div class="leftspan"></div>
        <ul class="inlineblock">
        </ul>
      </div>
    </form>
  </div>
</div>