تنسيق نتائج الإكمال التلقائي JQuery UI في جدول

Question

أنا الآن أستخدم http://jqueryui.com/demos/autocomplete/ بناءً على بعض التوصيات السابقة وهي تعمل بشكل جيد بالنسبة لي.

أتطلع إلى تنسيق النتائج في القائمة الإكمال التلقائي في جدول. الآن نتائجي مثل:

Last name, first name - id number - status code

عندما تكون هناك قائمة بالأسماء لا شيء يصطف بشكل جيد

Name - ID - Status
Brown, Charlie - 2 - A
Jones, Henry - 3 - I

أود أن أحصل بطريقة أو بأخرى

Name             ID  Status
Brown, Charlie   2   A
Jones, Henry     3   I

هل هذا ممكن؟ أنا أستخدم حاليًا مصفاة بيانات JSON حيث لدي صفيف "تسمية" و "قيمة" و "معرف" هي:

{"label":"Brown, Charlie - 2 - A","value":"Brown, Charlie","id":"2"}
{"label":"<span style="color: red;">Jones, Henry - 3 - I</span>","value":"Brown, Charlie","id":"2"}

التسمية مرئية في المنسدلة ، والقيمة هي ما يتم إرجاعه إلى مربع النص الأصلي والمعرف هو ما هو العودة إلى حقل مخفي.

لقد حاولت الاختلاط في بعض divs إلى جزء من المصفوفة دون حظ. تعمل الفترة الموجودة في الملصق للمستخدمين غير النشطين بشكل جيد بالنسبة لي ، لكن لا يمكنني ضبط عرض فترة إلى عرض ثابت.

هل هناك أي شيء أستطيع القيام به؟

Answer 1

هل فكرت على الإطلاق في استخدام خط ثابت مع خط (ساعي ، ربما) ثم حقل حقل اسمك؟

يجب أن تصطف الأمور بشكل جيد. شيء مثل:

$maxWidth = 30;
$nameWidth = strlen(lastname) + strlen(firstname) + 2  //don't forget the comma and space
$padding = $maxWidth - $nameWidth;

ثم فقط قم بتوصيل الاسم الأخير ، والاسم الأول مع المبلغ المحسوب والأشياء يجب أن تصطف.

Answer 2

أعتقد أن هذا يمكن أن يساعدك ، إليك JS:

$(function() {
//overriding jquery-ui.autocomplete .js functions
$.ui.autocomplete.prototype._renderMenu = function(ul, items) {
  var self = this;
  //table definitions
  ul.append("<table><thead><tr><th>ID#</th><th>Name</th><th>Cool&nbsp;Points</th></tr></thead><tbody></tbody></table>");
  $.each( items, function( index, item ) {
    self._renderItemData(ul, ul.find("table tbody"), item );
  });
};
$.ui.autocomplete.prototype._renderItemData = function(ul,table, item) {
  return this._renderItem( table, item ).data( "ui-autocomplete-item", item );
};
$.ui.autocomplete.prototype._renderItem = function(table, item) {
  return $( "<tr class='ui-menu-item' role='presentation'></tr>" )
    .data( "item.autocomplete", item )
    .append( "<td >"+item.id+"</td>"+"<td>"+item.value+"</td>"+"<td>"+item.cp+"</td>" )
    .appendTo( table );
};
//random json values
var projects = [
    {id:1,value:"Thomas",cp:134},
    {id:65,value:"Richard",cp:1743},
    {id:235,value:"Harold",cp:7342},
    {id:78,value:"Santa Maria",cp:787},
    {id:75,value:"Gunner",cp:788},
    {id:124,value:"Shad",cp:124},
    {id:1233,value:"Aziz",cp:3544},
    {id:244,value:"Buet",cp:7847}
];
$( "#project" ).autocomplete({
    minLength: 1,
    source: projects,
    //you can write for select too
    focus: function( event, ui ) {
        //console.log(ui.item.value);
        $( "#project" ).val( ui.item.value );
        $( "#project-id" ).val( ui.item.id );
        $( "#project-description" ).html( ui.item.cp );
        return false;
    }
})
});

يمكنك التحقق من هذا كمان

هذا قد يساعد أيضا كمان