index.html

﻿<!DOCTYPE html>
<html ng-app="searchAndSelectApp">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Search and Select</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <link rel="stylesheet" href="jQuery.SearchAndSelect.css" />

</head>

<body>
    <div id="dvSearchAndSelect">
    </div>
    <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="jQuery.SearchAndSelect.js"></script>
    <script type="text/javascript">
        $(function () {
            var options = {
                url: 'http://countrylistapi.apphb.com/api/country',
                selectedItem: {
                    key: 1,
                    value: 'India'
                },
                onItemClicked: function (item) {
                    alert(item.value);
                }
            };

            $("#dvSearchAndSelect").searchAndSelect(options);

        });
    </script>
</body>
</html>