Skip to content Skip to sidebar Skip to footer
Home / Asp.net Core / Javascript / Jquery

Put Scroll Down For Results In Jquery Autocomplete Plugin In Asp.net Core

Post a Comment
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><scriptsrc="https://code.jquery.com/jquery-2.1.1.min.js"type="text/javascript"></script><linkhref="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css"rel="stylesheet" /><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script><scripttype="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><selectid="country"style="width:300px;"><!-- Dropdown List Option --></select></div></body></html>

Result: enter image description here

use autocomplete:

@{ Layout = null;}
<htmllang="en"><head><metacharset="utf-8"><title>Autocomplete</title><linkhref="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css"><scriptsrc="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script><scriptsrc="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script><linkhref="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><divclass="ui-widget"><labelfor="tags"style="color:cornflowerblue">title：</label><inputid="tags" ></div></body></html>

Post a Comment for "Put Scroll Down For Results In Jquery Autocomplete Plugin In Asp.net Core"