examples/autocomplete.html

<html>
<head>
<title>Jexcel - Javascript spreadsheet</title>
<meta name='author' content='Paul Hodel'>
<meta itemprop='keywords' name='keywords' content='Jexcel, jquery, javascript, excel-like, spreadsheet, HTML, jquery plugin, table, grid'>
<meta itemprop='description' property='og:description' name='description' content='Jexcel is a jquery and javascript plugin you can use to embedded an excel-like spreadsheet in your website and applications.'>
<meta property='og:title' content='Jexcel - Javascript spreadsheet plugin'>
<meta name='viewport' id="viewport" content='width=device-width,initial-scale=1,user-scalable=no' />
<meta name='format-detection' content = "telephone=yes" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<meta name=viewport content="width=device-width, initial-scale=1">
<meta name="google-site-verification" content="fNDemv4nALjUDIqXc7xPfHDEV24wtpD9xsEKLkTIYSk" />

<meta itemprop="name" content="jExcel - the JavaScript plugin to create a excel like embeddable spreadsheet">
<meta itemprop="image" content="http://bossanova.uk/templates/default/img/logo-jexcel.png">
<meta itemprop="url" content="http://bossanova.uk/jexcel">
<meta property="og:type" content="website">
<meta property="og:site_name" content="jExcel">
<meta property="og:url" content="http://bossanova.uk/jexcel">
<meta property="og:locale" content="en_GB">
<meta property="og:image" content="http://bossanova.uk/templates/default/img/logo-jexcel.png">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<link rel="icon" href="http://bossanova.uk/templates/default/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans|Roboto|Dosis">
<link rel="stylesheet" href="http://bossanova.uk/templates/default/css/style.css" type="text/css" />

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

<script src="../dist/js/jquery.jexcel.js"></script>
<script src="../dist/js/jquery.jcalendar.js"></script>
<link rel="stylesheet" href="../dist/css/jquery.jexcel.css" type="text/css" />
<link rel="stylesheet" href="../dist/css/jquery.jexcel.green.css" type="text/css" />
<link rel="stylesheet" href="../dist/css/jquery.jcalendar.css" type="text/css" />

<script src="../dist/js/excel-formula.min.js"></script>

</head>
<body>

<div class='container'>

    <div class='row top'>

        <div class='column'><a href="http://bossanova.uk/jexcel"><img src="http://bossanova.uk/templates/default/img/logo-jexcel.png"></a></div>
        <div class='column'>

            <div id='menu'><div class='description' itemprop='description'></div><ul class='folder'><li><a href='http://bossanova.uk/jexcel'>jExcel website</a></li><li><a href='http://bossanova.uk/jexcel/docs'>Online Documentation</a></li><li><a href='index.html'>Examples</a></li></ul></div>

        </div>
        <div class='column'>

            <div id='search'></div>

        </div>
    </div>

    <div class='row content'>

        <div class='column' style='max-width:300px;padding:50px;padding-top:0px;' id='content_left'>

            <div id='content-left'>

                <ul>
                    <li onclick="window.open('creating-a-table-from-an-external-csv-file.html', '_top')"><a href="creating-a-table-from-an-external-csv-file.html" alt="Creating a web spreadsheet based on an external CSV">Remote data</a><br><span>Loading data from a CSV or JSON source</span></li>
                    <li onclick="window.open('currency-and-masking-numbers.html', '_top')"><a href="currency-and-masking-numbers.html" alt="Using currency column type and how to masking numbers">Masking and formating</a><br><span>How to mask or format a cell content</span></li>
                    <li onclick="window.open('including-formulas-on-your-spreadsheet.html', '_top')"><a href="including-formulas-on-your-spreadsheet.html" alt="Basic usage of formulas">Formulas</a><br><span>How to use formula in your table</span></li>
                    <li onclick="window.open('using-a-calendar-column-type.html', '_top')"><a href="using-a-calendar-column-type.html" alt="Calendar column type with date and datetime picker">Calendar picker</a><br><span>Date and datetime picker extensions</span></li>
                    <li onclick="window.open('sorting-data.html', '_top')"><a href="sorting-data.html" alt="Sorting your grid">Sorting</a><br><span>Learn the different ways to sort a table</span></li>
                    <li onclick="window.open('integrating-a-third-party-plugin-into-your-spreadsheet.html', '_top')"><a href="integrating-a-third-party-plugin-into-your-spreadsheet.html" alt="Custom column and integrating plugins on your table">Create custom cells</a><br><span>Integrate third party plugins </span></li>
                    <li onclick="window.open('working-with-dropdowns.html', '_top')"><a href="working-with-dropdowns.html" alt="Advanced dropdown column type">Advanced dropdown</a><br><span>How to use dropdown examples</span></li>
                    <li onclick="window.open('autocomplete.html', '_top')"><a href="autocomplete.html" alt="Autocomplete column">Autocomplete column</a><br><span>Native autocomplete comlumn type</span></li>
                    <li onclick="window.open('tracking-changes-on-the-spreadsheet.html', '_top')"><a href="tracking-changes-on-the-spreadsheet.html" alt="Events">Handling events</a><br><span>Integrating your table via callbacks</span></li>
                    <li onclick="window.open('readonly-options.html', '_top')"><a href="readonly-options.html" alt="Handling readonly column and cells on your spreadsheet">Readonly options</a><br><span>Working with readonly cells</span></li>
                    <li onclick="window.open('multiple-spreadsheets-in-the-same-page.html', '_top')"><a href="multiple-spreadsheets-in-the-same-page.html" alt="Create multiple instances in the same page">Multiple instances</a><br><span>Using multiple tables in the same application</span></li>
                    <li onclick="window.open('text-wrapping.html', '_top')"><a href="text-wrapping.html" alt="Wrapping compatibility">Wrapping compatibility</a><br><span>Wrapping the text in a column</span></li>
                    <li onclick="window.open('headers.html', '_top')"><a href="headers.html" alt="Nested Headers">Nested headers</a><br><span>Nested headers</span></li>
                </ul>

            </div>
        </div>
        <div class='column' style='margin-right:60px;min-width:280px;max-width:780px;text-align:justify;'>

            <div id='content'>

<div class='title'>Autocomplete column</div>

<p>It is natively presented as single dropdown with text filter enabled and it is based on a pre-defined options defined in the instance declaration or in a dynamic remote JSON source.</p>

<br>

<div id="my" style="width:100%"></div>


<script>
data = [
    ['BR', 'Cheese', 1, 'BR'],
    ['CA', 'Apples', 0, ''],
    ['US', 'Carrots', 1, ''],
    ['GB', 'Oranges', 0, ''],
];

countries = [
    {"name": "Afghanistan", "id": "AF"},
    {"name": "Aland Islands", "id": "AX"},
    {"name": "Albania", "id": "AL"},
    {"name": "Algeria", "id": "DZ"},
    {"name": "American Samoa", "id": "AS"},
    {"name": "AndorrA", "id": "AD"},
    {"name": "Angola", "id": "AO"},
    {"name": "Anguilla", "id": "AI"},
    {"name": "Antarctica", "id": "AQ"},
    {"name": "Antigua and Barbuda", "id": "AG"},
    {"name": "Argentina", "id": "AR"},
    {"name": "Armenia", "id": "AM"},
    {"name": "Aruba", "id": "AW"},
    {"name": "Australia", "id": "AU"},
    {"name": "Austria", "id": "AT"},
    {"name": "Azerbaijan", "id": "AZ"},
    {"name": "Bahamas", "id": "BS"},
    {"name": "Bahrain", "id": "BH"},
    {"name": "Bangladesh", "id": "BD"},
    {"name": "Barbados", "id": "BB"},
    {"name": "Belarus", "id": "BY"},
    {"name": "Belgium", "id": "BE"},
    {"name": "Belize", "id": "BZ"},
    {"name": "Benin", "id": "BJ"},
    {"name": "Bermuda", "id": "BM"},
    {"name": "Bhutan", "id": "BT"},
    {"name": "Bolivia", "id": "BO"},
    {"name": "Bosnia and Herzegovina", "id": "BA"},
    {"name": "Botswana", "id": "BW"},
    {"name": "Bouvet Island", "id": "BV"},
    {"name": "Brazil", "id": "BR"},
    {"name": "British Indian Ocean Territory", "id": "IO"},
    {"name": "Brunei Darussalam", "id": "BN"},
    {"name": "Bulgaria", "id": "BG"},
    {"name": "Burkina Faso", "id": "BF"},
    {"name": "Burundi", "id": "BI"},
    {"name": "Cambodia", "id": "KH"},
    {"name": "Cameroon", "id": "CM"},
    {"name": "Canada", "id": "CA"},
    {"name": "Cape Verde", "id": "CV"},
    {"name": "Cayman Islands", "id": "KY"},
    {"name": "Central African Republic", "id": "CF"},
    {"name": "Chad", "id": "TD"},
    {"name": "Chile", "id": "CL"},
    {"name": "China", "id": "CN"},
    {"name": "Christmas Island", "id": "CX"},
    {"name": "Cocos (Keeling) Islands", "id": "CC"},
    {"name": "Colombia", "id": "CO"},
    {"name": "Comoros", "id": "KM"},
    {"name": "Congo", "id": "CG"},
    {"name": "Congo, The Democratic Republic of the", "id": "CD"},
    {"name": "Cook Islands", "id": "CK"},
    {"name": "Costa Rica", "id": "CR"},
    {"name": "Cote D'Ivoire", "id": "CI"},
    {"name": "Croatia", "id": "HR"},
    {"name": "Cuba", "id": "CU"},
    {"name": "Cyprus", "id": "CY"},
    {"name": "Czech Republic", "id": "CZ"},
    {"name": "Denmark", "id": "DK"},
    {"name": "Djibouti", "id": "DJ"},
    {"name": "Dominica", "id": "DM"},
    {"name": "Dominican Republic", "id": "DO"},
    {"name": "Ecuador", "id": "EC"},
    {"name": "Egypt", "id": "EG"},
    {"name": "El Salvador", "id": "SV"},
    {"name": "Equatorial Guinea", "id": "GQ"},
    {"name": "Eritrea", "id": "ER"},
    {"name": "Estonia", "id": "EE"},
    {"name": "Ethiopia", "id": "ET"},
    {"name": "Falkland Islands (Malvinas)", "id": "FK"},
    {"name": "Faroe Islands", "id": "FO"},
    {"name": "Fiji", "id": "FJ"},
    {"name": "Finland", "id": "FI"},
    {"name": "France", "id": "FR"},
    {"name": "French Guiana", "id": "GF"},
    {"name": "French Polynesia", "id": "PF"},
    {"name": "French Southern Territories", "id": "TF"},
    {"name": "Gabon", "id": "GA"},
    {"name": "Gambia", "id": "GM"},
    {"name": "Georgia", "id": "GE"},
    {"name": "Germany", "id": "DE"},
    {"name": "Ghana", "id": "GH"},
    {"name": "Gibraltar", "id": "GI"},
    {"name": "Greece", "id": "GR"},
    {"name": "Greenland", "id": "GL"},
    {"name": "Grenada", "id": "GD"},
    {"name": "Guadeloupe", "id": "GP"},
    {"name": "Guam", "id": "GU"},
    {"name": "Guatemala", "id": "GT"},
    {"name": "Guernsey", "id": "GG"},
    {"name": "Guinea", "id": "GN"},
    {"name": "Guinea-Bissau", "id": "GW"},
    {"name": "Guyana", "id": "GY"},
    {"name": "Haiti", "id": "HT"},
    {"name": "Heard Island and Mcdonald Islands", "id": "HM"},
    {"name": "Holy See (Vatican City State)", "id": "VA"},
    {"name": "Honduras", "id": "HN"},
    {"name": "Hong Kong", "id": "HK"},
    {"name": "Hungary", "id": "HU"},
    {"name": "Iceland", "id": "IS"},
    {"name": "India", "id": "IN"},
    {"name": "Indonesia", "id": "ID"},
    {"name": "Iran, Islamic Republic Of", "id": "IR"},
    {"name": "Iraq", "id": "IQ"},
    {"name": "Ireland", "id": "IE"},
    {"name": "Isle of Man", "id": "IM"},
    {"name": "Israel", "id": "IL"},
    {"name": "Italy", "id": "IT"},
    {"name": "Jamaica", "id": "JM"},
    {"name": "Japan", "id": "JP"},
    {"name": "Jersey", "id": "JE"},
    {"name": "Jordan", "id": "JO"},
    {"name": "Kazakhstan", "id": "KZ"},
    {"name": "Kenya", "id": "KE"},
    {"name": "Kiribati", "id": "KI"},
    {"name": "Korea, Democratic People's Republic of", "id": "KP"},
    {"name": "Korea, Republic of", "id": "KR"},
    {"name": "Kuwait", "id": "KW"},
    {"name": "Kyrgyzstan", "id": "KG"},
    {"name": "Lao People's Democratic Republic", "id": "LA"},
    {"name": "Latvia", "id": "LV"},
    {"name": "Lebanon", "id": "LB"},
    {"name": "Lesotho", "id": "LS"},
    {"name": "Liberia", "id": "LR"},
    {"name": "Libyan Arab Jamahiriya", "id": "LY"},
    {"name": "Liechtenstein", "id": "LI"},
    {"name": "Lithuania", "id": "LT"},
    {"name": "Luxembourg", "id": "LU"},
    {"name": "Macao", "id": "MO"},
    {"name": "Macedonia, The Former Yugoslav Republic of", "id": "MK"},
    {"name": "Madagascar", "id": "MG"},
    {"name": "Malawi", "id": "MW"},
    {"name": "Malaysia", "id": "MY"},
    {"name": "Maldives", "id": "MV"},
    {"name": "Mali", "id": "ML"},
    {"name": "Malta", "id": "MT"},
    {"name": "Marshall Islands", "id": "MH"},
    {"name": "Martinique", "id": "MQ"},
    {"name": "Mauritania", "id": "MR"},
    {"name": "Mauritius", "id": "MU"},
    {"name": "Mayotte", "id": "YT"},
    {"name": "Mexico", "id": "MX"},
    {"name": "Micronesia, Federated States of", "id": "FM"},
    {"name": "Moldova, Republic of", "id": "MD"},
    {"name": "Monaco", "id": "MC"},
    {"name": "Mongolia", "id": "MN"},
    {"name": "Montserrat", "id": "MS"},
    {"name": "Morocco", "id": "MA"},
    {"name": "Mozambique", "id": "MZ"},
    {"name": "Myanmar", "id": "MM"},
    {"name": "Namibia", "id": "NA"},
    {"name": "Nauru", "id": "NR"},
    {"name": "Nepal", "id": "NP"},
    {"name": "Netherlands", "id": "NL"},
    {"name": "Netherlands Antilles", "id": "AN"},
    {"name": "New Caledonia", "id": "NC"},
    {"name": "New Zealand", "id": "NZ"},
    {"name": "Nicaragua", "id": "NI"},
    {"name": "Niger", "id": "NE"},
    {"name": "Nigeria", "id": "NG"},
    {"name": "Niue", "id": "NU"},
    {"name": "Norfolk Island", "id": "NF"},
    {"name": "Northern Mariana Islands", "id": "MP"},
    {"name": "Norway", "id": "NO"},
    {"name": "Oman", "id": "OM"},
    {"name": "Pakistan", "id": "PK"},
    {"name": "Palau", "id": "PW"},
    {"name": "Palestinian Territory, Occupied", "id": "PS"},
    {"name": "Panama", "id": "PA"},
    {"name": "Papua New Guinea", "id": "PG"},
    {"name": "Paraguay", "id": "PY"},
    {"name": "Peru", "id": "PE"},
    {"name": "Philippines", "id": "PH"},
    {"name": "Pitcairn", "id": "PN"},
    {"name": "Poland", "id": "PL"},
    {"name": "Portugal", "id": "PT"},
    {"name": "Puerto Rico", "id": "PR"},
    {"name": "Qatar", "id": "QA"},
    {"name": "Reunion", "id": "RE"},
    {"name": "Romania", "id": "RO"},
    {"name": "Russian Federation", "id": "RU"},
    {"name": "RWANDA", "id": "RW"},
    {"name": "Saint Helena", "id": "SH"},
    {"name": "Saint Kitts and Nevis", "id": "KN"},
    {"name": "Saint Lucia", "id": "LC"},
    {"name": "Saint Pierre and Miquelon", "id": "PM"},
    {"name": "Saint Vincent and the Grenadines", "id": "VC"},
    {"name": "Samoa", "id": "WS"},
    {"name": "San Marino", "id": "SM"},
    {"name": "Sao Tome and Principe", "id": "ST"},
    {"name": "Saudi Arabia", "id": "SA"},
    {"name": "Senegal", "id": "SN"},
    {"name": "Serbia and Montenegro", "id": "CS"},
    {"name": "Seychelles", "id": "SC"},
    {"name": "Sierra Leone", "id": "SL"},
    {"name": "Singapore", "id": "SG"},
    {"name": "Slovakia", "id": "SK"},
    {"name": "Slovenia", "id": "SI"},
    {"name": "Solomon Islands", "id": "SB"},
    {"name": "Somalia", "id": "SO"},
    {"name": "South Africa", "id": "ZA"},
    {"name": "South Georgia and the South Sandwich Islands", "id": "GS"},
    {"name": "Spain", "id": "ES"},
    {"name": "Sri Lanka", "id": "LK"},
    {"name": "Sudan", "id": "SD"},
    {"name": "Suriname", "id": "SR"},
    {"name": "Svalbard and Jan Mayen", "id": "SJ"},
    {"name": "Swaziland", "id": "SZ"},
    {"name": "Sweden", "id": "SE"},
    {"name": "Switzerland", "id": "CH"},
    {"name": "Syrian Arab Republic", "id": "SY"},
    {"name": "Taiwan, Province of China", "id": "TW"},
    {"name": "Tajikistan", "id": "TJ"},
    {"name": "Tanzania, United Republic of", "id": "TZ"},
    {"name": "Thailand", "id": "TH"},
    {"name": "Timor-Leste", "id": "TL"},
    {"name": "Togo", "id": "TG"},
    {"name": "Tokelau", "id": "TK"},
    {"name": "Tonga", "id": "TO"},
    {"name": "Trinidad and Tobago", "id": "TT"},
    {"name": "Tunisia", "id": "TN"},
    {"name": "Turkey", "id": "TR"},
    {"name": "Turkmenistan", "id": "TM"},
    {"name": "Turks and Caicos Islands", "id": "TC"},
    {"name": "Tuvalu", "id": "TV"},
    {"name": "Uganda", "id": "UG"},
    {"name": "Ukraine", "id": "UA"},
    {"name": "United Arab Emirates", "id": "AE"},
    {"name": "United Kingdom", "id": "GB"},
    {"name": "United States", "id": "US"},
    {"name": "United States Minor Outlying Islands", "id": "UM"},
    {"name": "Uruguay", "id": "UY"},
    {"name": "Uzbekistan", "id": "UZ"},
    {"name": "Vanuatu", "id": "VU"},
    {"name": "Venezuela", "id": "VE"},
    {"name": "Viet Nam", "id": "VN"},
    {"name": "Virgin Islands, British", "id": "VG"},
    {"name": "Virgin Islands, U.S.", "id": "VI"},
    {"name": "Wallis and Futuna", "id": "WF"},
    {"name": "Western Sahara", "id": "EH"},
    {"name": "Yemen", "id": "YE"},
    {"name": "Zambia", "id": "ZM"},
    {"name": "Zimbabwe", "id": "ZW"}
];

onload1 = function (instance) {
    // Get last header
    var lastColumn = $(instance).find('thead td').last();
    // Get actual table width
    var mainTable = $(instance).find('.jexcel');
    // New last header column width
    var width = parseInt($(lastColumn).prop('width')) + parseInt($(instance).width() - $(mainTable).width());
    // Update width
    $(lastColumn).prop('width', width);
}

$('#my').jexcel({
    data:data,
    colHeaders: ['Country', 'Food', 'Stock'],
    colHeaderClasses: [ 'a1', 'b2', 'c3' ],
    colAlignments:[ 'left', 'left', 'left', 'left' ],
    colWidths: [ 300, 100, 200 ],
    onload:onload1,
    columns: [
        { type: 'autocomplete', source:countries },
        { type: 'dropdown', source:['Apples','Bananas','Carrots','Oranges','Cheese'] },
        { type: 'checkbox' },
        { type: 'text', readOnly:true },
    ]
});
</script>
            </div>
        </div>
    </div>

</div>

</body>
</html>