Menu
I have jquery live search and when I type something I see result but when I clicked result I want to see value in my input..and after I clicked out of the input result must be display:none; but like autocomplete I tried something but I couldn't apply it.
I don't use autocomplete plugin because I must show image in my result.
$(document).ready(function() {
$("#srehberText").keyup(function() {
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(),
count = 0;
if (!filter) {
$(".commentlist li").fadeOut();
return;
}
var regex = new RegExp(filter, "i");
// Loop through the comment list
$(".commentlist li").each(function() {
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(regex) < 0) {
$(this).hide();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).fadeIn();
count++;
}
});
});
});ol {
list-style-type: none;
padding: 0;
width: 600px;
}
input {
width: 600px;
padding: 12px;
border: 1px solid #ccc;
color: #999;
}
li {
display: none;
}
li img {
margin-right: 5px;
}
li a {
display: block;
text-decoration: none;
color: #666;
font: 16px tahoma;
padding: 4px;
}
li a:hover {
background: #fffff0;
color: #333;
}<input type="text" class="text-input" id="srehberText" placeholder="Bölgeyi yazmaya başla" />
<ol class="commentlist">
<li>
<a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Germany</a>
</li>
<li>
<a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Russia</a>
</li>
<li>
<a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Turkey</a>
</li>
<li>
<a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">England</a>
</li>
<li>
<a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Netherlands</a>
</li>
<li>
<a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">ABD</a>
</li>
<li>
<a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Korea</a>
</li>
</ol>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
752
Try these, I made 2 options for you to try based on your code. I hope they help you achieve what you want.
Single select:
$(document).ready(function() {
$("#srehberText").keyup(function() {
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(),
count = 0;
if (!filter) {
$(".commentlist li").fadeOut();
return;
}
var regex = new RegExp(filter, "i");
// Loop through the comment list
$(".commentlist li").each(function() {
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(regex) < 0) {
$(this).hide();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).fadeIn();
count++;
}
});
});
});
$('.commentlist li a').click(function(){
$('.commentlist').fadeOut();
$("#srehberText").val($(this).text())
})ol {
list-style-type: none;
padding: 0;
width: 600px;
}
input {
width: 600px;
padding: 12px;
border: 1px solid #ccc;
color: #999;
}
li {
display: none;
}
li img {
margin-right: 5px;
}
li a {
display: block;
text-decoration: none;
color: #666;
font: 16px tahoma;
padding: 4px;
}
li a:hover {
background: #fffff0;
color: #333;
}<input type="text" class="text-input" id="srehberText" placeholder="Bölgeyi yazmaya başla" />
<ol class="commentlist">
<li>
<a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Germany</a>
</li>
<li>
<a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Russia</a>
</li>
<li>
<a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Turkey</a>
</li>
<li>
<a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">England</a>
</li>
<li>
<a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Netherlands</a>
</li>
<li>
<a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">ABD</a>
</li>
<li>
<a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Korea</a>
</li>
</ol>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>Multi select:
$(document).ready(function() {
$("#srehberText").keyup(function() {
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(),
count = 0;
if (!filter) {
$(".commentlist li").fadeOut();
return;
}
var regex = new RegExp(filter, "i");
// Loop through the comment list
$(".commentlist li").each(function() {
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(regex) < 0) {
$(this).hide();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).fadeIn();
count++;
}
});
});
});
var clicked = false;
$('.commentlist li a').click(function() {
var val = $("#srehberText").val();
if (!clicked) {
val = "";
clicked = true;
$("#srehberText").val($(this).text())
} else {
$("#srehberText").val(val + " " + $(this).text())
}
})
$(document).click(function(event) {
if (!$(event.target).closest('.commentlist, #srehberText').length) {
if ($('.commentlist').is(":visible")) {
$('.commentlist').hide();
}
}
})ol {
list-style-type: none;
padding: 0;
width: 600px;
}
input {
width: 600px;
padding: 12px;
border: 1px solid #ccc;
color: #999;
}
li {
display: none;
}
li img {
margin-right: 5px;
}
li a {
display: block;
text-decoration: none;
color: #666;
font: 16px tahoma;
padding: 4px;
}
li a:hover {
background: #fffff0;
color: #333;
}<input type="text" class="text-input" id="srehberText" placeholder="Bölgeyi yazmaya başla" />
<ol class="commentlist">
<li>
<a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Germany</a>
</li>
<li>
<a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Russia</a>
</li>
<li>
<a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Turkey</a>
</li>
<li>
<a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">England</a>
</li>
<li>
<a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Netherlands</a>
</li>
<li>
<a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">ABD</a>
</li>
<li>
<a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Korea</a>
</li>
</ol>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>The code below checks where you click and if it's not .commentlist, #srehberText then it will hide the ol
$(document).click(function(event) {
if (!$(event.target).closest('.commentlist, #srehberText').length) {
if ($('.commentlist').is(":visible")) {
$('.commentlist').hide();
}
}
})
Hope this would do.
$(document).ready(function() {
$("#srehberText").keyup(function() {
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(),
count = 0;
if (!filter) {
$(".commentlist li").fadeOut();
return;
}
var regex = new RegExp(filter, "i");
// Loop through the comment list
$(".commentlist li").each(function() {
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(regex) < 0) {
$(this).hide();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).fadeIn();
count++;
}
});
});
$(".commentlist li a").click(function() {
var val = $(this).text();
$("#srehberText").val(val);
$('.commentlist li').fadeOut();
});
});ol {
list-style-type: none;
padding: 0;
width: 600px;
}
input {
width: 600px;
padding: 12px;
border: 1px solid #ccc;
color: #999;
}
li {
display: none;
}
li img {
margin-right: 5px;
}
li a {
display: block;
text-decoration: none;
color: #666;
font: 16px tahoma;
padding: 4px;
}
li a:hover {
background: #fffff0;
color: #333;
}<input type="text" class="text-input" id="srehberText" placeholder="Bölgeyi yazmaya başla" />
<ol class="commentlist">
<li>
<a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Germany</a>
</li>
<li>
<a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Russia</a>
</li>
<li>
<a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Turkey</a>
</li>
<li>
<a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">England</a>
</li>
<li>
<a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Netherlands</a>
</li>
<li>
<a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">ABD</a>
</li>
<li>
<a href="#"><img src="https://cdn2.iconfinder.com/data/icons/seo-flat-6/128/39_Email_Marketing-16.png">Korea</a>
</li>
</ol>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
