• 0

إظهار نتائج البحث حتى لو لم يتم ادخال النص كامل

السلام عليكم

لدي موقع مربوط ب ملف json ب استخدام AJAX في JavaScript عند البحث عن المدن الموجودة في ملف json يظهر النتائج بشكل سليم دون اي مشاكل لكن يجب ادخال اسم المدينة كامل هل توجد طرقة لاظهار نتائج حتى لو نسى المستخدم اخر حرف من المدينة و عدة احرف

2 اشخاص أعجبوا بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

ممكن تستخدم دالة keyup في jQuery بحيث عند كتابة كل حرف من اسم المدينة تقوم بالبحث داخل ملف json , سأضع مثال يوضح ذلك 

$('#search').keyup(function(){
	var search = $(this).val();
	if(search != ""){
		loadData(search);
	} else {
		// هنا دالة جلب البيانات أو البحث داخل الملف
	}
});

ودالة loadData تكون هي دالة البحث داخل الملف بحيث يكون فيها استعلام البحث 

function loadData(query){
	$.ajax({
		// ....
	});
}

هذا مجرد مثال للتوضيح 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

طبعا سيتطلب هذا إنشاء خوارزمية بحث تقوم بفلترة نتائج البحث و إظهار الأقرب كتابة كنتائج تظهر .  

مثال عملي : 

// قم بجلب أسماء كل المدن و تخزينها في مصفوفة
const cities = [
  'Abudabi', 
  'Algiers', 
  'Oran', 
  'New York', 
  'Los Angelos', 
  'Las Vigas'
];

// سيكون عليك الوصول إلى نص  الحقل و استخراجه لإستعماله ككلمة مفتاحية 
const keyWord = 'b';

// فلترة النتائج بحسب عملية البحث
const filteredCities = cities.filter(
  
  /* فلترة  عناصر المصفوفة بحسب الحرف الأول يشترط الترتيب */
  city => city.trim() // إزالة الفراغات
              .toLowerCase()
              .startsWith(keyWord.trim().toLowerCase()) 
  
  /*
  لفلترة النتائح  بحسب أي حرف ضمن الكلمة لا يشترط الترتيب
  city => city.trim()
              .toLowerCase()
              .includes(keyWord.trim().toLowerCase())
  */
);

console.log(filteredCities);

 

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

يمكنك الاستعانة بأداة متخصصة بالبحث
مثل algolia

ويمكنك اضافتها كأداة بحث في كل من: JavaScript, PHP, Python, Ruby, React, Vue...
بالاضافة لتوفيرهاplugin خاصة بالبحث ل Netlify و Shopify, تمكنك من اضافة ميزة البحث لموقعك

تتميز بسهولة استخدامها و ارتفاع دقتها

للعلم تستعمل للبحث في الموقع الرسمي لBoostrap

 

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن