adding autocomplete to search input

Question

I have search input along with dropdown stored as li element .How Can I add a autocomplete feature to search tag to fetch data from li tag and show the corresponding result in search input.

The autocomplete should fetch the contents from ul li tag and do the operation.Can it be done by li search input tag?

 $(".search-input").on("click", function(e) { $(".results").css({ "display": "block" }); }) $(".search .search-list").on("click", function(e) { console.log('clicked') $('.search-input').val($(this).first().text()) })

 .search { position: relative; margin: 0 auto; /* width: 300px; */ } .search input { height: 30px; width: 100%; padding: 0 12px 0 25px; /* background: white url("https://cssdeck.com/uploads/media/items/5/5JuDgOa.png") 8px 6px no-repeat; */ border-width: 1px; border-style: solid; border-color: #a8acbc #babdcc #c0c3d2; border-radius: 13px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc; -moz-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc; -ms-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc; -o-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc; box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc; } .search input:focus { outline: none; border-color: #66b1ee; -webkit-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9); -moz-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9); -ms-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9); -o-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9); box-shadow: 0 0 2px rgba(85, 168, 236, 0.9); } .search input:focus + .results { display: block } .search .results { display: none; position: absolute; top: 35px; left: 0; cursor: pointer; right: 0; z-index: 10; padding: 0; margin: 0; border-width: 1px; border-style: solid; border-color: #cbcfe2 #c8cee7 #c4c7d7; border-radius: 3px; background-color: #fdfdfd; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdfdfd), color-stop(100%, #eceef4)); background-image: -webkit-linear-gradient(top, #fdfdfd, #eceef4); background-image: -moz-linear-gradient(top, #fdfdfd, #eceef4); background-image: -ms-linear-gradient(top, #fdfdfd, #eceef4); background-image: -o-linear-gradient(top, #fdfdfd, #eceef4); background-image: linear-gradient(top, #fdfdfd, #eceef4); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .search .results li { display: block } .search .results li:first-child { margin-top: -1px } .search .results li:first-child:before, .search .results li:first-child:after { display: block; content: ''; width: 0; height: 0; position: absolute; left: 50%; margin-left: -5px; border: 5px outset transparent; } .search .results li:first-child:before { border-bottom: 5px solid #c4c7d7; top: -11px; } .search .results li:first-child:after { border-bottom: 5px solid #fdfdfd; top: -10px; } .search .results li:first-child:hover:before, .search .results li:first-child:hover:after { display: none } .search .results li:last-child { margin-bottom: -1px } .search .results a { display: block; position: relative; margin: 0 -1px; padding: 6px 40px 6px 10px; color: #808394; font-weight: 500; text-shadow: 0 1px #fff; border: 1px solid transparent; border-radius: 3px; } .search .results a span { font-weight: 200 } .search .results a:before { content: ''; width: 18px; height: 18px; position: absolute; top: 50%; right: 10px; margin-top: -9px; /* background: url("https://cssdeck.com/uploads/media/items/7/7BNkBjd.png") 0 0 no-repeat; */ } .search .results a:hover { text-decoration: none; color: #fff; text-shadow: 0 -1px rgba(0, 0, 0, 0.3); border-color: #2380dd #2179d5 #1a60aa; background-color: #338cdf; /* background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #59aaf4), color-stop(100%, #338cdf)); background-image: -webkit-linear-gradient(top, #59aaf4, #338cdf); background-image: -moz-linear-gradient(top, #59aaf4, #338cdf); background-image: -ms-linear-gradient(top, #59aaf4, #338cdf); background-image: -o-linear-gradient(top, #59aaf4, #338cdf); background-image: linear-gradient(top, #59aaf4, #338cdf); */ -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08); -moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08); -ms-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08); -o-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08); box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08); } :-moz-placeholder { color: #a7aabc; font-weight: 200; } ::-webkit-input-placeholder { color: #a7aabc; font-weight: 200; } .lt-ie9 .search input { line-height: 26px }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <div class="modal fade" id="search-bar" role="dialog"> <div class="modal-dialog search-modal"> <div class="modal-content search-modal"> <div class="modal-body"> <section class="main"> <form class="search"> <input type="text" class="search-input" name="q" placeholder="Search..." /> <ul class="results"> <li class="search-list"><a href="">Search Result #1<br /><span>Description...</span></a></li> <li class="search-list"><a href="">Search Result #2<br /><span>Description...</span></a></li> <li class="search-list"><a href="">Search Result #3<br /><span>Description...</span></a></li> <li class="search-list"><a href="">Search Result #4</a></li> </ul> </form> </section> </div> </div> </div> </div>

Answer 1

you must set <a href="#" ...> and after click on each item that offered from your auto complete, hide the .results in your js ... I think its ok.

 $(".search-input").on("click", function(e) { $(".results").css({ "display": "block" }); }) $(".search .search-list").on("click", function(e) { console.log('clicked') $('.search-input').val($(this).first().text()); $(".results").css({ "display": "none" }); })

 .search { position: relative; margin: 0 auto; /* width: 300px; */ } .search input { height: 30px; width: 100%; padding: 0 12px 0 25px; /* background: white url("https://cssdeck.com/uploads/media/items/5/5JuDgOa.png") 8px 6px no-repeat; */ border-width: 1px; border-style: solid; border-color: #a8acbc #babdcc #c0c3d2; border-radius: 13px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc; -moz-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc; -ms-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc; -o-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc; box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc; } .search input:focus { outline: none; border-color: #66b1ee; -webkit-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9); -moz-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9); -ms-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9); -o-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9); box-shadow: 0 0 2px rgba(85, 168, 236, 0.9); } .search input:focus + .results { display: block } .search .results { display: none; position: absolute; top: 35px; left: 0; cursor: pointer; right: 0; z-index: 10; padding: 0; margin: 0; border-width: 1px; border-style: solid; border-color: #cbcfe2 #c8cee7 #c4c7d7; border-radius: 3px; background-color: #fdfdfd; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdfdfd), color-stop(100%, #eceef4)); background-image: -webkit-linear-gradient(top, #fdfdfd, #eceef4); background-image: -moz-linear-gradient(top, #fdfdfd, #eceef4); background-image: -ms-linear-gradient(top, #fdfdfd, #eceef4); background-image: -o-linear-gradient(top, #fdfdfd, #eceef4); background-image: linear-gradient(top, #fdfdfd, #eceef4); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .search .results li { display: block } .search .results li:first-child { margin-top: -1px } .search .results li:first-child:before, .search .results li:first-child:after { display: block; content: ''; width: 0; height: 0; position: absolute; left: 50%; margin-left: -5px; border: 5px outset transparent; } .search .results li:first-child:before { border-bottom: 5px solid #c4c7d7; top: -11px; } .search .results li:first-child:after { border-bottom: 5px solid #fdfdfd; top: -10px; } .search .results li:first-child:hover:before, .search .results li:first-child:hover:after { } .search .results li:last-child { margin-bottom: -1px } .search .results a { display: block; position: relative; margin: 0 -1px; padding: 6px 40px 6px 10px; color: #808394; font-weight: 500; text-shadow: 0 1px #fff; border: 1px solid transparent; border-radius: 3px; } .search .results a span { font-weight: 200 } .search .results a:before { content: ''; width: 18px; height: 18px; position: absolute; top: 50%; right: 10px; margin-top: -9px; /* background: url("https://cssdeck.com/uploads/media/items/7/7BNkBjd.png") 0 0 no-repeat; */ } .search .results a:hover { text-decoration: none; color: #fff; text-shadow: 0 -1px rgba(0, 0, 0, 0.3); border-color: #2380dd #2179d5 #1a60aa; background-color: #338cdf; /* background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #59aaf4), color-stop(100%, #338cdf)); background-image: -webkit-linear-gradient(top, #59aaf4, #338cdf); background-image: -moz-linear-gradient(top, #59aaf4, #338cdf); background-image: -ms-linear-gradient(top, #59aaf4, #338cdf); background-image: -o-linear-gradient(top, #59aaf4, #338cdf); background-image: linear-gradient(top, #59aaf4, #338cdf); */ -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08); -moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08); -ms-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08); -o-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08); box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08); } :-moz-placeholder { color: #a7aabc; font-weight: 200; } ::-webkit-input-placeholder { color: #a7aabc; font-weight: 200; } .lt-ie9 .search input { line-height: 26px }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <div class="modal fade" id="search-bar" role="dialog"> <div class="modal-dialog search-modal"> <div class="modal-content search-modal"> <div class="modal-body"> <section class="main"> <form class="search"> <input type="text" class="search-input" name="q" placeholder="Search..." /> <ul class="results"> <li class="search-list"><a href="#">Search Result #1<br /><span>Description...</span></a></li> <li class="search-list"><a href="#">Search Result #2<br /><span>Description...</span></a></li> <li class="search-list"><a href="#">Search Result #3<br /><span>Description...</span></a></li> <li class="search-list"><a href="#">Search Result #4</a></li> </ul> </form> </section> </div> </div> </div> </div>