Put Scroll Down For Results In Jquery Autocomplete Plugin In Asp.net Core
I want to put Scroll down for results that use the autocomplete plugin. I may have more than 1000 results, so I want a scroll bar to scroll through the results like this picture I
Solution 1:
I used custom data here, you can use Selectize Js, the effect is as follows.
View:
@{ Layout = null;}
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var country = ["Australia", "Bangladesh", "Denmark", "Hong Kong", "Indonesia", "Netherlands", "New Zealand", "South Africa"];
$("#country").select2({
data: country
});
});
</script>
</head>
<body>
<h1>DropDown with Search using jQuery</h1>
<div>
<select id="country" style="width:300px;">
<!-- Dropdown List Option -->
</select>
</div>
</body>
</html>
Result:
use autocomplete:
@{ Layout = null;}
<html lang="en">
<head>
<meta charset="utf-8">
<title>Autocomplete</title>
<link href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link href="jqueryui/style.css">
<style>
.ui-autocomplete {
max-height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
* html .ui-autocomplete {
height: 100px;
}
</style>
<script>
$(function () {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$("#tags").autocomplete({
source: availableTags,
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags" style="color:cornflowerblue">title：</label>
<input id="tags" >
</div>
</body>
</html>
Post a Comment for "Put Scroll Down For Results In Jquery Autocomplete Plugin In Asp.net Core"