3 سال پیش|
طراحی وب
ایجاد یک 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 به راحتی می‌توانید مقادیر موجود را با تایپ کردن بیابید و انتخاب کنید.
به‌روز رسانی: 1403/7/22
توی وبسایتم سعی می‌کنم محتوایی که تصور کنم ارزشمنده و به بقیه کمکی می‌کنه رو منتشر کنم. امیدوارم از مطالب وبسایت بتونید استفاده کنید و به کارتون بیاد. در ضمن اگه پروژه‌ی تحت وبی دارید که نیاز به برنامه‌نویسی و اجرا داره، می‌تونید با شماره انتهای صفحه با من تماس بگیرید تا در موردش با هم صحبت کنیم.