У меня есть проблема, которую я пытался решить в течение нескольких дней без успеха, я надеюсь, что кто-то может мне помочь. Я создал скрипт (фактически модифицированный для моего использования), чтобы отображать определенное содержимое на основе значений поля ввода (которое включает функцию автокомпиляции). Указанные значения являются типами фруктов или мяса (таким образом, вводятся для облегчения представления проблемы). Мое препятствие заключается в следующем: я могу легко отобразить или скрыть содержимое, если я использую входное значение в качестве идентификатора DIV, но я хотел бы сгруппировать значения в 2 категории и сделать содержимое отображаемым на основе этих двух.
(function($) {
$.fn.suggest = function(source, options) {
var settings = $.extend({
suggestionColor : '#FC6D58',
moreIndicatorClass : 'suggest-more',
moreIndicatorText : '…'
}, options);
return this.each(function() {
$this = $(this);
var $suggest = $('<div/>', {
'css' : {
'position' : 'absolute',
'height' : $this.height(),
'width' : $this.width(),
'top' : $this.css('borderTopWidth'),
'left' : $this.css('borderLeftWidth'),
'padding' : $this.cssShortForAllSides('padding'),
'margin' : $this.cssShortForAllSides('margin'),
'fontFamily' : $this.css('fontFamily'),
'fontSize' : $this.css('fontSize'),
'fontStyle' : $this.css('fontStyle'),
'lineHeight' : $this.css('lineHeight'),
'fontWeight' : $this.css('fontWeight'),
'letterSpacing' : $this.css('letterSpacing'),
'backgroundColor' : $this.css('backgroundColor'),
'color' : settings.suggestionColor
}
});
var $more = $('<span/>', {
'css' : {
'position' : 'absolute',
'top' : $suggest.height() + parseInt($this.css('fontSize'), 10) / 2,
'left' : $suggest.width(),
'display' : 'block',
'fontSize' : $this.css('fontSize'),
'fontFamily' : $this.css('fontFamily'),
'color' : settings.suggestionColor
},
'class' : settings.moreIndicatorClass
})
.html(settings.moreIndicatorText)
.hide();
$this
.attr({
'autocomplete' : "off",
'spellcheck' : "false",
'dir' : "ltr"
})
.css({
'background' : 'transparent'
})
.wrap($('<div/>', {
'css': {
'position' : 'relative',
'paddingBottom' : '1em'
}
}))
.bind('keydown.suggest', function(e){
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 9 && !e.altKey) {
e.preventDefault();
} else if (code == 13) {
if (!$suggest.is(':empty')) {
e.preventDefault();
}
} else if (code == 38 || code == 40) {
e.preventDefault();
var suggestions = $(this).data('suggestions');
if (suggestions.all.length > 1) {
if (code == 40 && suggestions.index < suggestions.all.length - 1) {
suggestions.suggest.html(suggestions.all[++suggestions.index]);
} else if (code == 38 && suggestions.index > 0) {
suggestions.suggest.html(suggestions.all[--suggestions.index]);
}
$(this).data('suggestions').index = suggestions.index;
}
}
})
.bind('keyup.suggest', function(e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 38 || code == 40) {
return false;
}
$more.hide();
var needle = $(this).val();
var needleWithWhiteSpace = needle.replace(' ', ' ');
if (code == 9 || code == 13) {
if ($suggest.text().length > 0) {
e.preventDefault();
var suggestions = $(this).data('suggestions');
$(this).val(suggestions.terms[suggestions.index]);
$suggest.empty();
return false;
}
}
$suggest.empty();
if (!$.trim(needle).length) {
return false;
}
var regex = new RegExp('^' + needle.replace(/[-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"), 'i');
var suggestions = [], terms = [];
for (var i = 0, l = source; i < l.length; i++) {
if (regex.test(l[i])) {
terms.push(l[i]);
suggestions.push(needleWithWhiteSpace + l[i].slice(needle.length));
}
}
if (suggestions.length > 0) {
if (suggestions[0] !== needle) {
$suggest.html(suggestions[0]);
}
$(this).data('suggestions', {
'all' : suggestions,
'terms' : terms,
'index' : 0,
'suggest': $suggest
});
if (suggestions.length > 1) {
$more.show();
}
}
})
.bind('blur.suggest', function(){
$suggest.empty();
});
$suggest.insertAfter($this);
$more.insertAfter($suggest);
});
};
$.fn.cssShortForAllSides = function(property) {
var $self = $(this), sum = [];
var properties = $.map(['Top', 'Right', 'Bottom', 'Left'], function(side){
return property + side;
});
$.each(properties, function(i, e) {
sum.push($self.css(e) || "0");
});
return sum.join(' ');
};
})(jQuery);
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
<style>
body { font-family:'Roboto Condensed'; background-color:#fafafa;; color:#000;}
.container { margin:50px auto; max-width:400px;}
input#search {
padding: 5px;
font-size: 1.2em;
letter-spacing: 0;
font-weight: normal;
position: relative;
color: #000;
width: 500px;
background: #fff;
border:1px solid #000;
z-index: 10;
line-height: 1.45;
}
.hide {display:none;}
</style>
</head>
<body>
<div class="container">
<h2>Write an item name and press enter to show content</h2>
<input type="text" name="search" id="search" />
</div>
<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="
crossorigin="anonymous"></script>
<script src="src/jquery.suggest.js"></script>
<script>
var products = ["BANANA", "BEEF STEAK", "SAUSAGE", "KIWI", "ORANGE", "PORK ROLL"];
$(function(){
$('#search').suggest(products,{});
});
</script>
<script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-157cd5b220a5c80d4ff8e0e70ac069bffd87a61252088146915e8726e5d9f147.js"></script>
<script>
$('#search').change(function () {
var select = $("input").val();
$(".hide").hide();
$('#' + select).show();
}).change();
</script>
<div id="SAUSAGE" class="small-12 medium-6 large-7 columns option hide">
<p>Meat is animal flesh that is eaten as food.[1] Humans have hunted and killed animals for meat since prehistoric times. The advent of civilization allowed the domestication of animals such as chickens, sheep, rabbits, pigs and cattle. This eventually led to their use in meat production on an industrial scale with the aid of slaughterhouses.</p>
</div>
</div>
<div id="BANANA" class="small-12 medium-6 large-7 columns option hide">
<p>In botany, a fruit is the seed-bearing structure in flowering plants (also known as angiosperms) formed from the ovary after flowering.</p>
</div>
</div>
</body>
</html>
ПРИМЕР
Я пишу BANANA -> BANANA является частью категории ФРУКТЫ - > Я показываю DIV с идентификатором «ФРУКТЫ».
Буду искренне благодарен любому, кто сможет мне помочь. Спасибо!