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

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

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

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

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

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

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

مثال عملي : 

// قم بجلب أسماء كل المدن و تخزينها في مصفوفة
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);

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

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

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

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