تنفيذ استعلام باستخدام Typeahead + Bloodhound وFOSJsRoutingBundle في Symfony2
-
02-01-2020 - |
سؤال
أحاول إعداد Typeahead + Bloodhound لإجراء بحث باستخدام اقتراحات في أحد الحقول.رمز HTML لهذا الحقل هو كما يلي:
<div class="col-sm-10" id="products_forms">
<input type="text" placeholder="Producto" id="ProductoForm_0_product_id" name="ProductoForm[0][product_id]" class="form-control typeahead">
</div>
أستخدم وظيفتين رئيسيتين من Symfony:واحد لإرجاع كافة المنتجات واستخدام هذا كـ prefetch
والآخر للمنتجات التي تمت تصفيتها.هذه هي الطريقة التي تبدو بها المسارات لهذه الوظائف:
// the one I use as prefetch parameter in bloodhound
* @Route("/get_products", name="all_products")
// the one I use as remote
* @Route("/get_products/{filter}", name="filter_products")
كما ترون، لم يحصل الأول على أي معلمات لأنه يُرجع جميع المنتجات كقيم JSON ولكن الثاني يأخذ {filter}
كحجة لتنفيذ LIKE
ويعيد فقط المنتجات التي تمت تصفيتها.
الآن لا أعرف كيف يعمل Bloodhound على الإطلاق، لذا قرأت ملف مستندات وأيضا للكتابة المسبقة قراءة مستندات وخذ منه مثالا هنا ال Remote
واحد وجعل هذا الرمز:
// Trigger typeahead + bloodhound
var products = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: Routing.generate('all_products'),
remote: Routing.generate('filter_products', { 'filter' : '%query' })
});
products.initialize();
$('#products_forms .typeahead').typeahead(null, {
name: 'products',
displayKey: 'value',
source: products.ttAdapter()
});
هل هذا صحيح؟أعني أنه عند تحميل الصفحة، سأحصل على جميع المنتجات التي تم جلبها مسبقًا ولكن إذا قمت بكتابة أي منها .typeahead
العنصر سأحصل على العناصر التي تمت تصفيتها فقط؟لا أعرف إذا %query
هي القيمة الصحيحة التي يجب أن أنتقل إليها filter_products
الطريق من أجل الحصول على القيم التي تمت تصفيتها.أي مساعدة؟
هذه هي المرة الأولى التي أستخدم فيها Typeahead + Bloodhound
المحلول
يستبدل remote: Routing.generate('filter_products', { 'filter' : '%query' })
على سبيل المثال
var url = Routing.generate('filter_products', {filter: 'WILDCARD'});
// ... some code
remote: {
url: url,
wildcard: 'WILDCARD'
}
سيؤدي ذلك إلى إنشاء عنوان url عام باستخدام RoutingBundle أولاً وسيأخذ "WILDCARD" كفلتر.ثم اطلب من Bloodhound استخدام "WILDCARD" على عنوان url كعنصر نائب وسيستبدله تمامًا بالاستعلام المُدخل.