jquery.ajax-combobox
Version:
jQuery plugin to create a text box which can auto-complete and pull-down-select.
91 lines (89 loc) • 4.04 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>jquery.ajax-combobox</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="sample/sample.css">
</head>
<body>
<nav class="navbar navbar-dark bg-dark fixed-top navbar-expand-lg">
<div class="container">
<a class="navbar-brand" href="./">
<svg class="octicon octicon-home" viewBox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M16 9l-3-3V2h-2v2L8 1 0 9h2l1 5c0 .55.45 1 1 1h8c.55 0 1-.45 1-1l1-5h2zm-4 5H9v-4H7v4H4L2.81 7.69 8 2.5l5.19 5.19L12 14z"></path></svg>
</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1" aria-controls="navbar1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar1">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="sample/basic.html">Basic</a>
</li>
<li class="nav-item">
<a class="nav-link" href="sample/sub-info.html">Sub info</a>
</li>
<li class="nav-item">
<a class="nav-link" href="sample/others.html">Others</a>
</li>
<li class="nav-item">
<a class="nav-link" href="sample/text-area.html">Text area</a>
</li>
</ul>
</div>
</div>
</nav>
<header class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="page-title">jquery.ajax-combobox</h1>
<p>jQuery plugin to create a text box which can auto-complete and pull-down-select.</p>
<p>
<a href="https://github.com/sutara79/jquery.ajax-combobox"><img src="https://img.shields.io/github/stars/sutara79/jquery.ajax-combobox.svg?style=social&label=Stars" alt="github repository"></a>
<a href="https://www.npmjs.com/package/jquery.ajax-combobox"><img src="https://img.shields.io/npm/v/jquery.ajax-combobox.svg" alt="npm version"></a>
</p>
</div>
</header>
<div class="container">
<div class="card-deck">
<div class="card">
<img src="sample/img/001.png" class="card-img-top" alt="Search">
<div class="card-body">
<h4 class="card-title">Search</h4>
<p class="card-text">
Type search words.
</p>
</div>
</div>
<div class="card">
<img src="sample/img/002.png" class="card-img-top" alt="Display All">
<div class="card-body">
<h4 class="card-title">Display All</h4>
<p class="card-text">
Shortcut key: <kbd>Down</kbd>
</p>
</div>
</div>
<div class="card">
<img src="sample/img/003.png" class="card-img-top" alt="Paging">
<div class="card-body">
<h4 class="card-title">Paging</h4>
<p class="card-text">
Shortcut key: <kbd>Left</kbd>, <kbd>Right</kbd>
</p>
</div>
</div>
</div>
</div>
</div><!-- .container -->
<footer>
<div class="container">
powered by <a href="http://www.usamimi.info/new/index.html">usamimi.info</a>, <a href="https://getbootstrap.com/">Bootstrap</a>
</div>
</footer>
<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>
</html>