اذهب إلى المحتوى
  • 0

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

حسن الشافعي2

السؤال

السلام عليكم

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

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

Recommended Posts

  • 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);

 

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

  • 0

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

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

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

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

 

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

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...