Kamis, 12 Juni 2014

Cara Membuat AUTOCOMPLETE ListBox

Standard
ini adalah tutorial membuat autocomplete dengan jquery, berikut langkah pertama untuk membuatnya.
  1. Bikin sebuah folder autocomplete.
  2. Download Script Jquerynya di sini --link--
  3. Download Script Jquery Ui Auto Complete disini --link--
  4. Download Script jquery.select-to-autocomplete.js  dan jquery.select-to-autocomplete.min.js
  5. Baru kita buat file index.html atau terserah ente aja lah.
    and then nih script htmlnya, diperhatikan baik-baik ya gan.

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Select to Autocomplete</title>
    <script src="jquery.js"></script>
    <script src="jquery-ui-autocomplete.js"></script>
    <script src="jquery.select-to-autocomplete.min.js"></script>
    <script type="text/javascript" charset="utf-8">
        (function($){
            $(function(){
                 $('select').selectToAutocomplete();
                   $('form').submit(function(){
                         alert( $(this).serialize() );
                        return false;
                    });
              });
           })(jQuery);
    </script>
    <style type="text/css" media="screen">
    body {
    font-family: Arial, Verdana, sans-serif;
    font-size: 13px;
    }
    .ui-autocomplete {
    padding: 0;
    list-style: none;
    background-color: #fff;
    width: 218px;
    border: 1px solid #B0BECA;
    max-height: 350px;
    overflow-y: scroll;
    }
    .ui-autocomplete .ui-menu-item a {
    border-top: 1px solid #B0BECA;
    display: block;
    padding: 4px 6px;
    color: #353D44;
    cursor: pointer;
    }
    .ui-autocomplete .ui-menu-item:first-child a {
    border-top: none;
    }
    .ui-autocomplete .ui-menu-item a.ui-state-hover {
    background-color: #D5E5F4;
    color: #161A1C;
    }
    </style>
    </head>
    <body>
    <form>
    <select name="Country" id="country-selector" autofocus="autofocus" autocorrect="off" autocomplete="off">
        <option value="" selected="selected">Select Name</option>
        <option value="1">Andri</option>
        <option value="2">Faisyal</option>
        <option value="3">Syahrial</option>
        <option value="4">Nanang</option>
        <option value="5">Beni</option> 
        <option value="6">Rusdi</option>
        <option value="7">Charlie</option>
        <option value="8">Deni</option>
        <option value="9">Endar</option>
        <option value="10">Fajar</option>
        </select>

    <input type="submit" value="Submit">
    </form>
    </body>
    </html>
  6. pastikan semua file tersebut didalam satu folder.

nih hasilnya gan , masuk ke link sini aja --DEMO--

download yang sudah saya kumpulkan dalam satu folder, ini linknya.

copyright 2014

0 komentar:

Posting Komentar