发表新帖
发表新帖

Autocomplete Without jQuery UI

后端 未结
关注
8 942
野性不改
野性不改 2021-02-04 01:52

I\'m using jQuery in my project and I need to implement autocomplete, but I\'d like to avoid including jQuery UI widget, and hopefully use some specific external plugin. Could y

相关标签:
8条回答
  • 暖寄归人
    2021-02-04 02:14

    I've started writing an auto complete / mentioning plugin in plain Javascript. I't not completed yet, but it could be a good start point.

    github

    0 讨论(0)
  • 眼角桃花
    2021-02-04 02:15

    You can use HTML5 'list' attribute in your input textbox and provide it a custom list of values by using datalist.

    <!DOCTYPE html>
<html>
<head>
<!--your stuff-->
</head>
<body>
<!--your stuff-->
<input type="text" id="txtAutoComplete" list="languageList"/><!--your input textbox-->
<datalist id="languageList">
<option value="HTML" />
<option value="CSS" />
<option value="JavaScript" />
<option value="SQL" />
<option value="PHP" />
<option value="jQuery" />
<option value="Bootstrap" />
<option value="Angular" />
<option value="ASP.NET" />
<option value="XML" />
</datalist>
</body>
</html>

    If you didn't get it, Read more at http://www.cheezycode.com/2015/09/create-auto-complete-dropdown-using.html

    There's a video as well for it Auto-Complete Without JQuery

    0 讨论(0)
  • 轻奢々
    2021-02-04 02:15

    Here is one little autocomplete plugin written by me, please try: https://github.com/Fischer-L/autoComplt

    Because I am not using jQuery and don't want to include some big libs just for one feature, I write for myself.

    This plugin doesn't depend on other libs and doesn't have to include other CSS, so just including one JS script is enough.

    P.S If you use it and find some thing which needs to be improved, please tell me :)

    0 讨论(0)
  • 不要未来只要你来
    2021-02-04 02:20

    This the best multi category/feature Autocomplete plugin I have ever seen, it contains many features and gives you full control over 40 parameters to customize it as you wish. It is so dynamic and provides multi languages inputs with auto detection for RTL or LTR languages.

    It doesn't use the JQuery and the code has very light size and so clean.

    The demo page: http://www.muwakaba.com/plugins/autocomplete

    You can use it with different configurations on the demo page and see all the parameters and the features.

    Good luck!

    0 讨论(0)
  • 北海茫月
    2021-02-04 02:22

    You can use the Ajax Autocomplete for jQuery plugin

    And here is the full documentation

    Code

    SCRIPT

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.2.24/jquery.autocomplete.min.js"></script>
<script>
   a1 = $('#query').autocomplete({
         width: 448,
         delimiter: /(,|;)\s*/,
         lookup: 'Andorra,Azerbaijan,Bahamas,Bahrain,Benin,Bhutan,Bolivia,Bosnia Herzegovina,Botswana,Brazil,Brunei,Bulgaria,Burkina, Burundi,Cambodia,Cameroon,Canada,Cape Verde,Central African Rep,Chile,China,Colombia,Comoros,Congo,Congo {Democratic Rep},Costa Rica,Croatia,Cuba,Cyprus,Czech Republic,Denmark,Djibouti,East Timor,Ecuador,Egypt,El Salvador,Equatorial Guinea,Eritrea,Fiji,France,Georgia,Germany,Ghana,Greece,Grenada,Guatemala,Guinea,Guinea-Bissau,Guyana,Haiti,Honduras,Hungary,India,Iraq,Ireland {Republic},Ivory Coast,Jamaica,Japan,Kazakhstan,Kiribati,Korea North,'.split(',')
      }); 
    </script>

    CSS

    .text-field {
    -moz-box-sizing: border-box;
    border: 1px solid #EEEEEE;
    font-family: "Source Sans Pro",Arial,sans-serif;
    font-size: 0.73684em;
    font-weight: 600;
    height: 37px;
    margin: 0;
    padding: 5px;
    width: 100%;
}
.autocomplete-suggestion {
    overflow: hidden;
    padding: 2px 5px;
    white-space: nowrap;
}
.autocomplete-suggestions strong {
    color: #3399FF;
    font-weight: normal;
}
.autocomplete-selected{
  background:#F0F0F0;
}

    HTML

     <input type="text" id="query" class="text-field valid" autocomplete="off" placeholder="Search here">

    I created a demo of autocomplete here is the link jsbin.com

    0 讨论(0)
  • 误落风尘
    2021-02-04 02:22 
    <script src="https://api.mqcdn.com/sdk/place-search-js/v1.0.0/place-search.js"></script>
<link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/place-search-js/v1.0.0/place-search.css"/>

    Here is input :

    <input type="search" id="place-search-input" placeholder="Start Searching..."/>

    Javascript : 

    <script type="text/javascript">

var ps;
window.onload = function () {
    ps = placeSearch({
        key: 'lYrP4vF3Uk5zgTiGGuEzQGwGIVDGuy24',
        container: document.querySelector('#place-search-input'),
        useDeviceLocation: false,
        collection: [
            'poi',
            'airport',
            'address',
            'adminArea',
        ]
    });
}

    0 讨论(0)
 看不清?
提交回复
热议问题