【发布时间】：2017-10-14 15:31:39
【问题描述】：
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();
};
});
【问题讨论】：
标签： javascript jquery html css autocomplete