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

10:48:00 PM - 1399/12/17

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

1 نظر

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

حذف امتیاز کاربر : 1549 رتبه کاربر : 1 تاریخ ثبت : ۰۵:۱۲ ۱۳۹۹/۱۲/۱۸

پاسخ دهنده : saedbfd 03:52:00 AM - ۱۳۹۹/۱۲/۲۱

شما میتونید هر چیزی رو به 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

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

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

ویرایش شده در پنج شنبه ۲۱ اسفند ۱۳۹۹ ساعت ۰۳:۵۳:۴۴