ایجاد یک select box با HTML و jQuery با قابلیت جست و جو

برای ایجاد یک select box با قابلیت جست و جو یا همان حالت combo box می‌توان به صورت زیر عمل کرد:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js" integrity="sha256-+C0A5Ilqmu4QcSPxrlGpaZxJ04VjsRjKu+G82kl5UJk=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap3.min.css" integrity="sha256-ze/OEYGcFbPRmvCnrSeKbRTtjG4vGLHXgOqsyLFTRjg=" crossorigin="anonymous" />
</head>
<body>

<script>
$(document).ready(function () {
  $('select').selectize({
	  sortField: 'text'
  });
});
</script>

  <select>
    <option value="">انتخاب کنید</option>
    <option value="1">احسان</option>
    <option value="2">رضا</option>
    <option value="3">مرتضی</option>
    <option value="4">الهه</option>
    <option value="5">حامد</option>
    <option value="6">شاهد</option>
    <option value="7">رانی</option>
    <option value="8">طیبه</option>
    <option value="9">مهدی</option>
    <option value="10">علی</option>
    <option value="11">امیر</option>
  </select>
</body>
</html>

در این select box به راحتی می‌توانید مقادیر موجود را با تایپ کردن بیابید و انتخاب کنید.

درباره نویسنده: احسان

مطالب زیر را حتما بخوانید