ایجاد Autocomplete دوخطی با جاوااسکریپت و فایل json

مشخصات سوال کننده :

کاربر : safir امتیاز کاربر : 10 رتبه کاربر : 71

دسته بندی : جاوا اسکریپت جی کوئری

نظر ویرایش گزارش نشان

به این سوال امتیاز بدهید 0

تعداد بازدید این سوال : 3217

1 نظر

fateme : خودتون هیچ کاری براش انجام ندادید؟ یعنی کدی ننوشتید که بشه ادامه کار شما رو بررسی کرد ؟

امتیاز کاربر : 1635 رتبه کاربر : 2 تاریخ ثبت : 05:12 1399/12/18

حذف

هوش مصنوعی

پاسخ هوش مصنوعی

برای ایجاد autocomplete دوخطی با جاوااسکریپت و استفاده از یک فایل JSON، می توانید از کد زیر استفاده کنید:


// فایل JSON (data.json)
[
    {"name": "برگ سبز", "description": "این یک برگ سبز است."},
    {"name": "برگ خشک", "description": "این یک برگ خشک است."},
    {"name": "برگ درخت", "description": "این برگ از درخت است."}
]

// کد HTML



// کد جاوااسکریپت
fetch('data.json')
    .then(response => response.json())
    .then(data => {
        const input = document.getElementById('autocomplete-input');
        const resultsContainer = document.getElementById('autocomplete-results');

        input.addEventListener('input', () => {
            const query = input.value.toLowerCase();
            resultsContainer.innerHTML = '';
            if (query) {
                const filteredData = data.filter(item => item.name.toLowerCase().includes(query));
                filteredData.forEach(item => {
                    const resultItem = document.createElement('div');
                    resultItem.innerHTML = `${item.name}${item.description}`;
                    resultsContainer.appendChild(resultItem);
                });
            }
        });
    })
    .catch(error => console.error('خطا در بارگذاری فایل JSON:', error));

در کد بالا، ابتدا فایل JSON که شامل لیستی از اقلام است بارگذاری می شود. سپس با استفاده از یک input برای جستجو، موارد را فیلتر کرده و نتایج را نمایش می دهیم.

به این پاسخ امتیاز بدهید 0

امتیاز: - رتبه: -

نظر ویرایش گزارش

پاسخ دهنده : saedbfd 03:52 1399/12/21

شما میتونید هر چیزی رو به AutoComplete اضافه کنید. مثلا ممکنه قصد داشته باشید یک عکس کوچک در کنار متن ظاهر بشه.

تصویر زیر رو ببینید

نمایش تصویر در autocomplete

این لینک رو برای این کار بخونید Show image in JQuery ui autocomplete

اما برای موردی که شما می خواید هم از این کدها می تونید استفاده کنید. البته کمی تغییرات و استایل دهی لازم داره.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI（Autocomplete)</title>
  <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
  <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="jqueryui/style.css">
  <style>
  #project-label {
    display: block;
    font-weight: bold;
    margin-bottom: 1em;
  }
  #project-icon {
    float: left;
    height: 32px;
    width: 32px;
  }
  #project-description {
    margin: 0;
    padding: 0;
  }
  </style>
  <script>
  $(function() {
    var projects = [
      {
        value: "jquery",
        label: "jQuery",
        desc: "the write less, do more, JavaScript library",
        icon: "jquery_32x32.png"
      },
      {
        value: "jquery-ui",
        label: "jQuery UI",
        desc: "the official user interface library for jQuery",
        icon: "jqueryui_32x32.png"
      },
      {
        value: "sizzlejs",
        label: "Sizzle JS",
        desc: "a pure-JavaScript CSS selector engine",
        icon: "sizzlejs_32x32.png"
      }
    ];
 
    $( "#project" ).autocomplete({
      minLength: 0,
      source: projects,
      focus: function( event, ui ) {
        $( "#project" ).val( ui.item.label );
        return false;
      },
      select: function( event, ui ) {
        $( "#project" ).val( ui.item.label );
        $( "#project-id" ).val( ui.item.value );
        $( "#project-description" ).html( ui.item.desc );
        $( "#project-icon" ).attr( "src", "images/" + ui.item.icon );
 
        return false;
      }
    })
    .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
      return $( "<li>" )
        .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
        .appendTo( ul );
    };
  });
  </script>
</head>
<body>
 
<div id="project-label"></div>
<img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt="">
<input id="project">
<input type="hidden" id="project-id">
<p id="project-description"></p>
 
 
</body>
</html>

خروجی دستورات بالا رو توی تصویر زیر می بینید

آموزش Autocomplete

می بینید هر واژه ای که وارد می کنید آیتم های مربوطه به همراه یک خط توضیحات نمایش داده میشه. حالا اون خط توضیحات رو میتونید استایل بهش بدید و مثلا کوچیکتر و کمرنگتر کنیدتا مشابه اون چیزی که میخواید بشه.

برای تست کدها میتونید اینجا کلیک کنید.

ویرایش شده در پنج شنبه 21 اسفند 1399 ساعت 03:53:44

به این پاسخ امتیاز بدهید 1

امتیاز: 1674 رتبه: 1

نظر ویرایش گزارش

آخرین سوالات ثبت ‌شده

سوالات مرتبط

آموزش های پرطرفدار

برای ارسال پاسخ لطفا وارد حساب کاربری خود شوید. ورود

ایجاد Autocomplete دوخطی با جاوااسکریپت و فایل json

پاسخ هوش مصنوعی

آموزش ساخت اتوماسیون اداری تحت وب

آموزش ساخت سیستم فروش و انبارداری وب

آموزش ساخت سیستم حقوق و دستمزد وب با سینکفیوژن

آموزش ساخت سیستم آزمونگیر آنلاین