close
تبلیغات در اینترنت
آموزش فیلتر کردن جستجو,آموزش ساخت فیلتر سرچ,فیلتر سرچ,فیلتر جستجو,Filt
صفحه اصلی پرشین استک

{ پرشین استک }

به دنیای برنامه نویسی خوش آمدید
|


پرشین استک تنها یک سایت نیست ، بلکه یک پروژه همگانی می باشد .


تعداد مطالب :
142


تعداد توسعه دهندگان :
11


تاریخ امروز :
یکشنبه 02 اردیبهشت 1397

به کانال تلگرام ما بپیوندید


×

لیست سوالات من

افزودن

چگونه برای سایت یا وبلاگ خود یک فیلتر لیست یا Filter List بسازیم ؟

من در سایت / وبلاگ خود یک منوی افقی دارم که شامل تعداد زیادی آیتم است . می خواهم یک کادر جستجو برای آن بسازم که جستجوی آیتم ها با نام آنها آسان شود . چگونه می توانم این کار را انجام دهم ؟

 

پاسخ :

برای این کار شما باید یک فیلتر سرچ یا Filter Search بسازید که اسامی را فیلتر کرده و به شما تحویل می دهد . منظور از فیلتر کردن ، مطابقت دادن آیتم ها با اسم جستجو شده است .

مرحله ی اول ) کد های CSS زیر را بین دو تگ <style> و <style/> موجود در بخش head صفحه وارد کنید :

 

#myInput {
    background-image: url('/css/searchicon.png'); /* Add a search icon to input */
    background-position: 10px 12px; /* Position the search icon */
    background-repeat: no-repeat; /* Do not repeat the icon image */
    width: 100%; /* Full-width */
    font-size: 16px; /* Increase font-size */
    padding: 12px 20px 12px 40px; /* Add some padding */
    border: 1px solid #ddd; /* Add a grey border */
    margin-bottom: 12px; /* Add some space below the input */
}

#myUL {
    /* Remove default list styling */
    list-style-type: none;
    padding: 0;
    margin: 0;
}


#myUL li a {
    border: 1px solid #ddd; /* Add a border to all links */
    margin-top: -1px; /* Prevent double borders */
    background-color: #f6f6f6; /* Grey background color */
    padding: 12px; /* Add some padding */
    text-decoration: none; /* Remove default text underline */
    font-size: 18px; /* Increase the font-size */
    color: black; /* Add a black text color */
    display: block; /* Make it into a block element to fill the whole list */
}

#myUL li a.header {
    background-color: #e2e2e2; /* Add a darker background color for headers */
    cursor: default; /* Change cursor style */
}

#myUL li a:hover:not(.header) {
    background-color: #eee; /* Add a hover effect to all links, except for headers */
}

 

توجه کنید که باید آیکونی برای جستجو آپلود کرده و جایگزین عکس فعلی کنید .

مرحله ی دوم ) سپس کد های HTML زیر را در بخش body صفحه وارد کنید :

 

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">

<ul id="myUL">
  <li><a href="#" class="header">A</a></li>
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>

  <li><a href="#" class="header">B</a></li>
  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>

  <li><a href="#" class="header">C</a></li>
  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</a></li>
</ul>

 

مرحله ی سوم ) کد های Java Script زیر را به منظور مدیریت فیلتر لیست ، در بخش body صفحه وارد کنید :

 

<script>
function myFunction() {
    // Declare variables
    var input, filter, ul, li, a, i;
    input = document.getElementById('myInput');
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName('li');

    // Loop through all list items, and hide those who don't match the search query
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}
</script>

 

اگر می خواهید فیلتر لیست شما به کوچک و بزرگی حروف حساس باشد ، ;()filter = input.value.toUpperCase را از کد های بالا حذف کنید .

برای راستچین کردن فیلتر جستجوی بالا کد های زیر را در بخش کد های CSS به بلوک های myUL li a# و  myInput# اضافه کنید :

 

  text-align:right;
  direction:rtl;

مقدار padding و background-position در بلوک myInput# را به صورت زیر تغییر دهید :

padding: 12px 40px 12px 40px;

background-position: 98% 12px;

همچنین می توانید از کتابخانه Java Script برای ساخت این فیلتر سرچ استفاده کنید .

 

صفحه اصلی

35

17 / 05 / 1396

PERSIAN STACK


دانلود تمامی API های اندروید

ادامه مطلب

687

چرا گاهی اوقات API موقعیت مکانی سرویس گوگل پلی ، موقعیت مکانی اشتباهی را برمی گرداند ؟

ادامه مطلب

651

چگونه نرم افزار ضبط صدای اندرویدی بسازیم ؟

ادامه مطلب

551

چرا TextView کلمات را با حروف می شکند ؟

ادامه مطلب

511

چگونه Google API برای سطح API 25 را پیدا کنیم ؟

ادامه مطلب

381

چرا وبسایت تجارت الکترونیک Magento 2 در Webview اندروید کار نمی کند ؟

ادامه مطلب

381

دانلود پروژه نمایش جستجوی کتاب برای اندروید

ادامه مطلب

347

قسمت شانزدهم - جدول ها در HTML

ادامه مطلب

269

دانلود کتابخانه Retrofit برای اندروید + پروژه

ادامه مطلب

265

دانلود سورس کد بازی اندرویدی Klooni 1010! + فایل APK

ادامه مطلب

261

در تکمیل خودکار اندروید ، دلیل dispatchProvideAutofillStructure() not laid out چیست ؟

ادامه مطلب

247

چرا زمانی که با استفاده از cordova در اندروید 7.0 ، اس ام اس ارسال می کنیم ، با اثتثنای (Exception) امنیتی مواج

ادامه مطلب

245

آیا راهی برای یافتن تغیرات ماه در نمای تقویم اندروید (calendar view) وجود دارد ؟

ادامه مطلب

243

چگونه ارور com.bumptech.glide.Registry$NoModelLoaderAvailableException: Failed to find any ModelLoaders را در اندروید رفع کنیم ؟

ادامه مطلب

205

دانلود سورس کد اپلیکیشن هواشناسی برای اندروید + فایل APK

ادامه مطلب

199

دانلود سورس کد اپلیکیشن اسکنر بارکد برای اندروید + فایل APK

ادامه مطلب

157

دانلود سورس کد تمامی نسخه های تلگرام + فایل های نصبی

ادامه مطلب

153

آموزش استفاده از دیتابیس آماده در پروژه اندرویدی

ادامه مطلب

147

دانلود تمامی نسخه های gradle برای اندروید

ادامه مطلب

143

دانلودسورس کد اپلیکیشن موزیک پلیر برای اندروید + فایل APK

ادامه مطلب

141

دانلود اسکریپت جاوای PS-CH# - ایجاد ورودی متنی پیشرفته

ادامه مطلب

یکشنبه 05 آذر 1396

قسمت هفدهم - لیست ها در HTML

ادامه مطلب

یکشنبه 21 آبان 1396

چگونه می توان با استفاده از CSS ، رنگ placeholder را تغییر داد ؟

ادامه مطلب

یکشنبه 21 آبان 1396

قسمت شانزدهم - جدول ها در HTML

ادامه مطلب

شنبه 20 آبان 1396

دانلود تمامی نسخه های gradle برای اندروید

ادامه مطلب

شنبه 20 آبان 1396

قسمت پانزدهم - عکس ها در HTML

ادامه مطلب

جمعه 19 آبان 1396

قسمت چهاردهم - لینک ها در HTML

ادامه مطلب

یکشنبه 14 آبان 1396

آموزش ساخت و شخصی سازی Navigation Drawer در اندروید استودیو

ادامه مطلب

یکشنبه 14 آبان 1396

قسمت سیزدهم - CSS در HTML

ادامه مطلب

شنبه 13 آبان 1396

قسمت بیست و پنجم (قسمت آخر) - آموزش ساخت بازی حدس

ادامه مطلب

پنجشنبه 11 آبان 1396

قسمت بیست و چهارم - آموزش نحوه ی پردازش فایل ها در جاوا

ادامه مطلب

پنجشنبه 11 آبان 1396

قسمت بیست و سوم - برنامه تکمیلی جاوا (6)

ادامه مطلب

پنجشنبه 11 آبان 1396

قسمت بیست و دوم - معرفی آرایه ها در جاوا

ادامه مطلب

پنجشنبه 11 آبان 1396

قسمت بیست و یکم - برنامه تکمیلی جاوا (5)

ادامه مطلب

پنجشنبه 11 آبان 1396

قسمت بیستم - معرفی مفهوم وراثت در جاوا

ادامه مطلب

پنجشنبه 11 آبان 1396

قسمت نوزدهم - برنامه تکمیلی جاوا (4)

ادامه مطلب

پنجشنبه 11 آبان 1396

قسمت هجدهم - معرفی عبارات کنترلی در جاوا

ادامه مطلب

پنجشنبه 11 آبان 1396

قسمت هفدهم - برنامه تکمیلی جاوا (2-3)

ادامه مطلب

چهارشنبه 10 آبان 1396

چگونه در برنامه نویسی اندروید ، یک ListView با متن و عکس بسازیم ؟

ادامه مطلب

سه شنبه 09 آبان 1396

چگونه در برنامه نویسی اندروید از فونت شخصی خود استفاده کنیم ؟

ادامه مطلب

سه شنبه 09 آبان 1396

قسمت هفدهم - لیست ها در HTML

ادامه مطلب

چگونه می توان با استفاده از CSS ، رنگ placeholder را تغییر داد ؟

ادامه مطلب

قسمت سیزدهم - CSS در HTML

ادامه مطلب

جلسه ی هشتم - استایل در HTML

ادامه مطلب

چرا زمانی که با استفاده از cordova در اندروید 7.0 ، اس ام اس ارسال می کنیم ، با اثتثنای (Exception) امنیتی مواج

ادامه مطلب

آیا راهی برای یافتن تغیرات ماه در نمای تقویم اندروید (calendar view) وجود دارد ؟

ادامه مطلب

چگونه می توان برای وبسایت / وبلاگ ، منویی ساخت که روی تمام دستگاه ها قابل نمایش باشد ؟

ادامه مطلب

چگونه می توان نوار Toast برای وبسایت / وبلاگ ساخت ، طوری که بتوان از آن جهت نمایش هشدار استفاده کرد ؟

ادامه مطلب

چگونه می توان با استفاده از HTML و CSS یک Tooltip شخصی سازی شده ساخت ؟

ادامه مطلب

چگونه یک برای سایت یا وبلاگ خود یک نوار مهارت (Skill Bar) انیمیشن دار بسازیم ؟

ادامه مطلب

چگونه برای سایت یا وبلاگ خود یک گالری عکس یا Lightbox بسازیم ؟

ادامه مطلب

چگونه می توانم فرم های رزبلاگ را شخصی سازی کنم ؟

ادامه مطلب

چگونه یک مدل ایمیج (Modal Image) برای وبسایت یا وبلاگ خود طراحی کنیم ؟

ادامه مطلب

چگونه یک مدل باکس برای وبسایت یا وبلاگ خود بسازیم ؟

ادامه مطلب

چگونه یک بخش کد (Code Panel) برای وبسایت یا وبلاگ خود بسازیم ؟

ادامه مطلب

چگونه با html و css یک دکمه سه بعدی و انیمیشن دار بسازیم ؟

ادامه مطلب

چگونه برای سایت یا وبلاگ خود ، اسلاید شو بسازیم ؟

ادامه مطلب

× برای نظر گذاشتن یا پاسخ دادن به سوالات باید در سایت عضو باشید !

برای حمایت از ما روی بنر های زیر کلیک کنید .

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

×

ارتباط با ما