تگ های موضوع ایجاد برای با

AUTO COMPLETE برای TEXTBOX با JQUERY

AutoComplete یک ویژگی است که به کاربران کمک می‌کند با شروع به تایپ، پیشنهادات مرتبط را مشاهده کنند. این ابزار بهینه‌سازی تجربۀ کاربری را بهبود می‌بخشد. حال، بیایید مراحل ایجاد یک AutoComplete ساده برای TextBox با استفاده از jQuery را بررسی کنیم.

مراحل ایجاد AutoComplete

۱. بارگذاری jQuery:
نخست، باید jQuery را به صفحۀ HTML خود اضافه کنید. می‌توانید از CDN استفاده کنید:
```html
<script src="https://code.jquery.com/jquery-

1. 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 بسیار آسان است. با تغییرات کوچک می‌توانید قابلیت‌های بیشتری مانند جستجو در پایگاه داده یا افزونه‌های دیگر را اضافه کنید. با این روش، تجربۀ کاربری بهتری برای کاربران خود فراهم کنید!