magicsuggest
Version:
MagicSuggest is a multiple selection auto-suggest input box for Bootstrap 3.
100 lines (85 loc) • 4.46 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="MagicSuggest is a multiple selection combo box built for bootstrap themes">
<meta name="author" content="Nicolas Bize">
<link rel="shortcut icon" href="http://nicolasbize.com/magicsuggest/assets/ico/favicon.ico">
<title>MagicSuggest - Home</title>
<!--
<link href="magicsuggest/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="magicsuggest/lib/magicsuggest/magicsuggest.css" rel="stylesheet">
<link href="magicsuggest/lib/gh-ribbon/gh-fork-ribbon.css" rel="stylesheet">
<link href="magicsuggest/assets/css/custom.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!--
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="magicsuggest/lib/bootstrap/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="magicsuggest/lib/magicsuggest/magicsuggest.js"></script>
</head>
<body class="cover">
<div class="github-fork-ribbon-wrapper right">
<div class="github-fork-ribbon">
<a href="https://github.com/nicolasbize/magicsuggest">View on GitHub</a>
</div>
</div>
<a class="notice" href="faviconx.html">Check out my new open source project, FavIconX!</a>
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">MagicSuggest</h3>
<ul class="nav masthead-nav">
<li class="active"><a href="magicsuggest/index.html">Home</a></li>
<li><a href="magicsuggest/examples.html">Examples</a></li>
<li><a href="magicsuggest/doc.html">Documentation</a></li>
<li><a href="magicsuggest/tutorial.html">Tutorial</a></li>
</ul>
</div>
</div>
<div class="inner cover">
<h1 class="cover-heading shadow centered">MagicSuggest</h1>
<p class="lead shadow centered">Multiple selection combobox built for bootstrap themes.</p>
<p class="lead">
<!-- <div id="ms1" class="form-control" value='["Chicago","Houston"]'></div> -->
<div id="ms1" class="form-control"></div>
</p>
</div>
<div class="mastfoot">
<div class="inner">
<p>
<a href="https://github.com/nicolasbize/magicsuggest/tarball/master">tar.gz</a> |
<a href="https://github.com/nicolasbize/magicsuggest/zipball/master">zip</a> |
<a href="magicsuggest/helpout.html">help out</a> |
<a href="magicsuggest/licence.html">mit licence</a>
</p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
var ms1 = $('#ms1').magicSuggest({
data: "country-by-abbreviation.json",
mode: "remote",
method: "GET"
});
});
</script>
</body>
</html>