4
Jqueryとブートストラップ4を使用して独自のカスタム入力自動補完APIを作成しようとしています。 選択された入力項目にリスト項目のテキストのプレビューを表示します。私はその価値を変えることによってそれを行うことができました。しかし、私が望んでいたものではありませんでした。カスタム構築されたオートコンプリートにプレビューテキストを追加するにはどうすればよいですか？
マイAutocomlete 
私は
たい私は、入力中のテキストのプレビューをしたいです。それをどうすれば実現できますか？私はこれらを行うことができるいくつかのAPIがあることを知っています。しかし、私は自分自身を作りたいです。入力または任意の方法でプレビューを表示する方法はありますか？ 入力にラベルを残しておき、その値を変更しようとしました。しかし、ラベルは正しく整列していませんでした。
私は以下のスニペットに自分のコードの大まかなバージョンを保管しています。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<style>
.list-group {
margin-top: 10px;
position: fixed;
border-radius: 2px;
max-height: 200px;
background: rgb(255, 255, 255);
overflow-y: auto;
overflow-x: hidden;
border: 1px solid rgb(238, 238, 238);
box-shadow: 0px 10px 10px 2px #cbc8c8;
padding: 4px 2px;
z-index: 10;
}
.list-group::-webkit-scrollbar-track {
border-radius: 2px;
background-color: #bbbbbb;
}
.list-group::-webkit-scrollbar {
width: 5px;
}
.list-group::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #6aa1ff;
}
/*
* STYLE 2
*/
.loader {
border: 2px solid #f3f3f3;
border-radius: 50%;
border-top: 2px solid #3498db;
width: 30px;
height: 30px;
margin: 20px auto;
-webkit-animation: spin 2s linear infinite;
/* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
rgb(215, 215, 215) 100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div style="height:20px;"></div>
<div class="container">
<div class="form-group col-6" style="margin: 0px auto">
<input type="text" name="" value="" placeholder="Search" class="form-control my">
</div>
<!-- <div class="list-group"> <a href="#" class="list-group-item list-group-item-action active"> Cras justo odio </a> <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a> <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a> <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur</a> <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a> <a href="#" class="list-group-itemlist-group-item-action ">Vestibulum at eros</a></div> -->
<script>
var data = [
'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];
var searchData = [];
function searchMe(string) {
console.log("why");
searchData = [];
data.forEach((item) => {
if (item.match(new RegExp(string, 'i')))
searchData.push(highlight(item, string));
});
$('.list-group').html("<div class='loader'></div>");
$('.list-group').html("");
if(searchData.length)
searchData.forEach(
(item) => $('.list-group').append(' <a href="#" class="list-group-item list-group-item-action ">'+item+'</a>')
);
else {
$('.list-group').html("<h4>No results found</h4>");
}
}
function highlight(text, str) {
return text.replace(new RegExp('(^|)(' + str + ')(|$)','ig'), '$1<b>$2</b>$3');
}
$(function() {
let input;
//enable or disable the autocomplete
$('div').on('mouseenter', '.list-group a', function() {
console.log('mousein');
$('.list-group a.active').removeClass('active');
$(this).addClass('active');
}).on('mouseleave', '.list-group', function() {
$('.list-group a.active').removeClass('active');
});
$(document).on('click', '.list-group a', function() {
if (input) {
input.val($(this).text());
}
$('.list-group').remove();
});
//autocomplete scroll and action on key up
$('input.my').on('keyup', function(e) {
console.log('From key up');
console.log(e.which);
let inLength = $(this).val().length;
console.log(e.key);
//!$('.list-group').length && inLength
if (((e.key <= 'z' && e.key >= 'a') || (e.key >= 'A' && e.key <= 'Z') && e.key.length === 1) || e.which === 229) {
if(!$('.list-group').length) {
$(this).after(
'<div class="list-group"> </div>'
);
}
setTimeout(searchMe, 0,$(this).val());
// $('.list-group').html(
//
// //' <div ><h6 class="text-center text-secondary">Loading...</h6><div class="loader"></div></div> '
// ' <a href="#" class="list-group-item list-group-item-action ">Hari </a> <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a> <a href="#" class="list-group-item list-group-item-action">Subesh</a> <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur</a> <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a> <a href="#" class="list-group-item list-group-item-action ">Vestibulum at eros</a>'
//);
let width = parseInt($(this).css('width'));
if (width > parseInt($('.list-group').css('width'))) {
console.log('width Changed: ' + width);
$('.list-group').css('width', width);
} else {
console.log(width);
console.log($('.list-group').css('width'));
}
console.log("Added list");
} else if ($('.list-group').length) {
//down press
if (e.which === 40) {
if (!$('.list-group a.active').length)
$('.list-group').find('a').eq(0).addClass('active');
else if ($('.list-group a.active').next().length) {
$('.list-group a.active').removeClass('active').next().addClass('active');
} else {
console.log("Enter");
$('.list-group a.active').removeClass('active').parent().children('a').eq(0).addClass('active');
$('.list-group').scrollTop($('.list-group a.active').get(0).offsetTop);
}
}
//up press
else if (e.which === 38) {
if (!$('.list-group a.active').length) {
$('.list-group').find('a').eq(0).addClass('active');
let text = $('.list-group a.active').text();
$('label').html(text);
} else if ($('.list-group a.active').prev().length) {
$('.list-group a.active').removeClass('active').prev().addClass('active');
let text = $('.list-group a.active').text();
$('label').html(text);
} else {
$('.list-group').scrollTop($('.list-group a.active').get(0).offsetTop);
$('.list-group a.active').removeClass('active');
}
}
//enter or right keyPressed()
else if (e.which === 39 || e.which === 13) {
if ($('.list-group a.active').length)
$(this).val($('.list-group a.active').text());
$('.list-group ').remove();
}
//bacspace
else if (e.which === 8) {
//alert('Subesh');
if ($(this).val() === "")
$('.list-group ').remove();
} else if (e.which === 27) {
$('.list-group').remove();
}
//set the scroll pos
if ($('.list-group a.active').prev().length)
$('.list-group').scrollTop($('.list-group a.active').prev().get(0).offsetTop);
} else {
console.log('No list');
}
});
$('input.my').on('focusin', function(e) {
if ($(this) != input) {
$('.list-group ').remove();
input = $(this);
}
});
$(':not(input)').on('click', function() {
$('.list-group ').remove();
});
//keydown operation
$('input.my').on('keydown', function(e) {
console.log('From Down');
console.log(e.which);
let lastChar = $(this).val().length;
//tab
if (e.which === 9) {
if ($('.list-group').length) {
if ($('.list-group a.active').length) {
$(this).val($('.list-group a.active').text());
$('.list-group ').remove();
} else {
$('.list-group').find('a').eq(0).addClass('active');
e.preventDefault();
e.stopPropagation();
}
}
}
//up
else if (e.which === 38) {
e.preventDefault();
e.stopPropagation();
}
});
});
</script>
</body>
</html>
これは私の問題を解決します。私はここからそれを取ることができます。 –