TLDR;如何在自动填充搜索下拉列表的左侧添加表格,如下图所示?
我的标题中有一个搜索栏,它根据一小部分样本产品使用JS函数进行自动完成。
我需要在下拉预览中添加标题和表格,但无法找出插入HTML的位置,以便在搜索栏中输入内容时填充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();
};
});
答案 0 :(得分:1)
只是想帮助你开始,你必须稍后改进。
JS更新了(这是为了在html中更新span的类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块(使用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>