ابحث HTML مع jQuery (الإكمال التلقائي)
-
28-09-2019 - |
سؤال
لدي مجموعة من divs المخفية مع طاولة واحدة بداخلها. يحتاج المستخدمون إلى البحث عن اسم (يمكن أن يحتوي على مسافات) داخل الخلية الأولى ، ثم إعادة معرف DIV.
لقد بحثت في المكون الإضافي JQueryui Autocomplete ، لكن أواجه مشاكل في العمل مع قيم متعددة. توصيل في مستندات و العروض التوضيحية.
أستخدم مثال "البيانات المخصصة والعرض" كقاعدة مع صفيف بيانات محدد مسبقًا ، لكني أود تجنبها واستخدام المحدد ببساطة.
مربع البحث
<label for="search_name">Find name</label>
<input type="text" name="search_name" value="" id="search_name">
<span style="display:none;" id="search_result"></span>
divs
<div id="name_101284"><table>
<tr><th colspan="5">John Doe (<a href="http://link">text</a>) - snip</th></tr>
<tr><th>C1</th><th>C2</th><th>C3</th><th>C4</th><th>C5</th></tr>
<tr><td>snip
</table></div>
JS
var nameAC = [
{label:"John Doe",id:"101284"},
{label:"Johnny",id:"152345"},
{label:"Jim Nelson",id:"77344"},
{label:"Jimmy",id:"87457"},
{label:"Maria",id:"100934"},
{label:"Maria Nelson",id:"94734"},
{label:"Jane Doe",id:"86247"},
{label:"Janet",id:"106588"}
];
$('#search_name').autocomplete({
minLength: 1,
delay: 300,
source: nameAC,
focus: function(event, ui) {
$('#search_name').val(ui.item.label);
return false;
},
select: function(event, ui) {
$('#search_result').text(ui.item.id);
$('#search_result').show();
}
});
خاصية "التسمية" هي الاسم المتوقع يحتوي على قيم لملء النتيجة المنسدلة UL. يتطلب تغييره الكتابة فوق طريقة _RenderItem الافتراضية ، مثل هذا
$('#search_name').autocomplete({
stuff
})
.data("autocomplete")._renderItem = function(ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + item.name + "</a>")
.appendTo(ul);
};
لكنه يبدو معيبًا.
هل يمكنني إنشاء محدد (أو وظيفة رد الاتصال) لتجنب الاضطرار إلى صنع مجموعة Nameac؟
المحلول
كيم ، أعتقد أن الطريقة التي تقوم بها هي صلبة للغاية. إذا كنت ترغب في إنشاء المصدر بواسطة وظيفة ما ، أقترح عليك تسهيل تحليل بياناتك ، أي عن طريق وضع علامة على الاسم في كل DIV.
ومع ذلك ، إليك طريقة واحدة للقيام بذلك مع بياناتك كما هي الآن. ربما لا يكون ذلك مثاليًا ، وبالتالي اقتراحي:
function makeArray() {
var results = [];
$("div[id^='name_']").each(function() {
results.push({
'label': $(this).find('th:first').text().replace(/(.*) \(.*/, '$1'),
'id': this.id.replace(/name_(\d+)/, '$1')
});
});
return results;
}
من الواضح ، إذا كان اسم المستخدم الخاص بك شيء من هذا القبيل: <span class="name">John Doe</span>
, ، ثم ستكون التسمية أسهل: $(this).find('span.name').text()
يمكنك رؤية نسخة بسيطة من هذا في العمل هنا: http://jsfiddle.net/ryleb/mycbx/
تعديل: كان يجب أن أذكر ، وهذا ما يسمى من الإكمال التلقائي مثل هذا:
$('#search_name').autocomplete({
source: makeArray() // <-- note the brackets, function is being **called**
});