آموزش jQuery UI قسمت سوم کار با Autocomplete
0 0

آموزش jQuery UI قسمت سوم کار با Autocomplete


آموزش jQuery UI قسمت سوم کار با Autocomplete

در این پست در ادامه آموزش jQuery UI به مبحث Autocomplete  در jQuery UI می پردازیم

یکی دیگر از جالب ترین کارهای که می توان با jQuery UI انجام داد جستجوی اتوماتیک می باشد.

در مثال زیر یک input تعریف کردیم و id آن را برابر autocomplete قرار دادیم.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="content/jquery-ui.css" rel="stylesheet" />
    <script src="scripts/jquery.js"></script>
    <script src="scripts/jquery-ui.js"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $(function () {
                var availableTags = [
	"ActionScript",
	"AppleScript",
	"Asp",
	"BASIC",
	"C",
	"C++",
	"Clojure",
	"COBOL",
	"ColdFusion",
	"Erlang",
	"Fortran",
	"Groovy",
	"Haskell",
	"Java",
	"JavaScript",
	"Lisp",
	"Perl",
	"PHP",
	"Python",
	"Ruby",
	"Scala",
	"Scheme"
                ];
                $("#autocomplete").autocomplete({ source: availableTags });
            });
        });
    </script>
</head>
<body>
    <div class="ui-widget">
        <label for="autocomplete">Autocomplete</label>
        <input id="autocomplete" title="type &quot;a&quot;">
    </div>
</body>
</html>

در اینجا برای اینکه ما داده ای نداریم تا از دیتابیس بخوانیم تعدادی داده را در یک متغیر var به نام availableTags قرار می دهیم. سپس input را با استفاده از id آن انتخاب می کنیم و تابع autocomplete را صدا می زنیم و همچنین source را برابر متغیر var که در بالا تعریف کردیم قرار می دهیم.

دانلود

نویسنده حسین فتحی
گروه مطلب JqueryUI
نوع مطلب سورس کد و آموزش
تاریخ انتشار ۴ تیر ۱۳۹۴
منبع ایران گنج
تعداد نظرات ۲
قیمت کاربران عضو سایت
توضیح توجه:
  • زمانی که روی لینک دانلود کلیک می کنید لینک دانلود به مدت 24 ساعت معتبر خواهد بود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

نظر / سوال

Captcha
نظرات کاربران

  • مسلم

    با سلام

    اگه میشه اموزش jquery ui-category رو هم قرار بدید بطوری که بشه اطلاعات مربوط به category ها رو از جدول های دیتابیس خوند.

    یه چیزی شبیه به موارد زیر جستجوی سایت دیجی کالا

    http://demo.bubbleshop.net/

    https://www.pinterest.com/pin/401172279286525035

    اگه کسی سورس نمونه asp.net mvc این رو داره معرفی کنه چون خیلی بهش نیاز دارم ممنون

    پاسخ
    • مدیر

      با سلام

      آموزش نحوه جستجوی اتوماتیک در MVC 5 تو سایت هستش می تونید اش استفاده کنیدکه به صورت کامل توضیح داده شده

      پاسخ