AUTO COMPLETE برای TEXTBOX با JQUERY
AutoComplete یک ویژگی است که به کاربران کمک می‌کند با شروع به تایپ، پیشنهادات مرتبط را مشاهده کنند. این ابزار بهینه‌سازی تجربۀ کاربری را بهبود می‌بخشد. حال، بیایید مراحل ایجاد یک AutoComplete ساده برای TextBox با استفاده از jQuery را بررسی کنیم.
مراحل ایجاد AutoComplete
۱. بارگذاری jQuery:
نخست، باید jQuery را به صفحۀ HTML خود اضافه کنید. می‌توانید از CDN استفاده کنید:
```html
<script src="https://code.jquery.com/jquery-
- 6.0.min.js"></script>
۲. ایجاد ساختار HTML:
سپس یک TextBox ساده و یک لیست برای نمایش پیشنهادات ایجاد کنید:
```html
<input type="text" id="myInput" placeholder="جستجو کنید...">
<ul id="suggestions"></ul>
```
۳. نوشتن CSS برای زیباسازی:
حالا بیایید کمی CSS اضافه کنیم تا پیشنهادات زیباتر به نظر برسند:
```css
#suggestions {
border: 1px solid #ccc;
display: none;
position: absolute;
background: white;
list-style-type: none;
padding: 0;
margin: 0;
width: 200px;
}
#suggestions li {
padding: 8px;
cursor: pointer;
}
#suggestions li:hover {
background-color: #f0f0f0;
}
```
۴. نوشتن کد jQuery:
اکنون، کد jQuery را برای فعال‌سازی AutoComplete اضافه کنید:
```javascript
$(document).ready(function() {
var data = ["سیب", "موز", "پرتقال", "توت فرنگی", "گلابی"];
$('#myInput').on('keyup', function() {
var input = $(this).val().toLowerCase();
$('#suggestions').empty().hide();
if(input) {
var filteredData = data.filter(function(item) {
return item.toLowerCase().indexOf(input) === 0;
});
$.each(filteredData, function(index, item) {
$('#suggestions').append('<li>' + item + '</li>');
});
$('#suggestions').show();
}
});
$(document).on('click', '#suggestions li', function() {
$('#myInput').val($(this).text());
$('#suggestions').hide();
});
});
```
توضیحات کد
- data: این آرایه شامل پیشنهادات است. می‌توانید آن را با داده‌های واقعی از سرور یا پایگاه داده جایگزین کنید.
- keyup event: این تابع هر بار که کاربر کلید را فشار می‌دهد، اجرا می‌شود و لیست پیشنهادات را بر اساس ورودی کاربر به‌روز می‌کند.
- filter: این قسمت به فیلتر کردن داده‌ها بر اساس ورودی کاربر کمک می‌کند.
- click event: این تابع به کاربر اجازه می‌دهد با کلیک بر روی هر پیشنهاد، مقدار آن را در TextBox قرار دهد.
نتیجه‌گیری
ایجاد یک AutoComplete ساده با jQuery بسیار آسان است. با تغییرات کوچک می‌توانید قابلیت‌های بیشتری مانند جستجو در پایگاه داده یا افزونه‌های دیگر را اضافه کنید. با این روش، تجربۀ کاربری بهتری برای کاربران خود فراهم کنید!
ایجاد AUTOCOMPLETE برای TEXTBOX با JQUERY
AutoComplete یکی از ویژگی‌های مهم در طراحی وب است که به کاربران کمک می‌کند تا با شروع به تایپ، پیشنهاداتی را دریافت کنند. این ویژگی می‌تواند تجربه کاربری را به طرز چشمگیری بهبود بخشد. در اینجا به طور جامع و کامل به ایجاد AutoComplete برای TextBox با استفاده از jQuery خواهیم پرداخت.
مراحل ایجاد AutoComplete
۱. آماده‌سازی HTML
ابتدا یک TextBox ساده در HTML ایجاد کنید. به عنوان مثال:
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>AutoComplete با jQuery</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/
- 12.1/themes/base/jquery-ui.css">
<body>
<label for="search">جستجو:</label>
<input type="text" id="search" placeholder="شروع به تایپ کنید...">
<script src="https://code.jquery.com/jquery-
- 6.0.min.js"></script>
- 12.1/jquery-ui.min.js"></script>
</html>
```
۲. اضافه کردن داده‌ها
سپس، داده‌هایی که می‌خواهید به کاربر نمایش دهید را تعریف کنید. می‌توانید این داده‌ها را در یک آرایه تعریف کنید.
```javascript
<script>
$(document).ready(function() {
var items = [
"سیب",
"موز",
"انگور",
"پرتقال",
"هلو",
"کیوی",
"توت فرنگی",
"آناناس"
];
$("#search").autocomplete({
source: items
});
});
</script>
```
۳. استفاده از jQuery UI
با اضافه کردن توابع jQuery UI، می‌توانید به آسانی از قابلیت AutoComplete استفاده کنید. با استفاده از متد `autocomplete` در این کد، مشخص کردیم که منبع داده‌ها همان آرایه `items` است.
نتیجه‌گیری
با انجام این مراحل، شما یک TextBox با قابلیت AutoComplete دارید. کاربران می‌توانند با تایپ کردن، پیشنهادهایی را مشاهده کنند که به آنها کمک می‌کند سریع‌تر و آسان‌تر جستجو کنند. این امر نه تنها تجربه کاربری را بهبود می‌بخشد، بلکه به کاهش اشتباهات تایپی نیز کمک می‌کند.
با این توضیحات، شما می‌توانید AutoComplete را در پروژه‌های خود پیاده‌سازی کنید و به کاربران خود تجربه‌ای بهتر هدیه دهید.
