如何在autocomplete()UI中自定义找到的项目?

时间:2015-06-17 22:42:28

标签: javascript jquery jquery-ui autocomplete

我正在尝试更改找到的项目在autocomplete UI中的显示方式。在对话框中使用此autoComplete wigide。

我尝试使用'_renderMenu'属性,如下面的代码,但找到的项目显示为空白“无数据”

这是我的代码

void printErr(const char *msg)
{
    char str[256] = {0};
    FormatMessageA(FORMAT_MESSAGE_FROM_SYSTEM, NULL, GetLastError(), 0, str, 255, NULL);
    std::cerr << msg << ": " << str << std::endl;
}

...

DWORD size_pixels = img_width * img_height * 4;

HGLOBAL hMem = GlobalAlloc(GHND, sizeof(BITMAPV5HEADER) + size_pixels);
if (!hMem)
{
    printErr("Error allocating memory for bitmap data");
    return;
}

BITMAPV5HEADER* hdr = (BITMAPV5HEADER*) GlobalLock(hMem);
if (!hdr)
{
    printErr("Error accessing memory for bitmap data");
    GlobalFree(hMem);
    return;
}

hdr->bV5Size = sizeof(BITMAPV5HEADER);
hdr->bV5Width = img_width;
hdr->bV5Height = -img_height;
hdr->bV5Planes = 1;
hdr->bV5BitCount = 32;
hdr->bV5Compression = BI_BITFIELDS;
hdr->bV5SizeImage = size_pixels;
hdr->bV5RedMask   = 0xff000000;
hdr->bV5GreenMask = 0x00ff0000;
hdr->bV5BlueMask  = 0x0000ff00;
hdr->bV5AlphaMask = 0x000000ff;

// img_pixels_ptr is a unsigned char* to the pixels in non-planar RGBA format
CopyMemory(hdr+1, img_pixels_ptr, size_pixels);
GlobalUnlock(hMem);

if (!OpenClipboard(hwnd))
{
    printErr("Error opening clipboard");
}
else
{
    if (!EmptyClipboard())
        printErr("Error emptying clipboard");

    else if (!SetClipboardData(CF_DIBV5, hMem))
        printErr("Error setting bitmap on clipboard");

    else
        hMem = NULL; // clipboard now owns the memory

    CloseClipboard();
}

if (hMem)
    GlobalFree(hMem);

1 个答案:

答案 0 :(得分:0)

我明白了......

以下是正在搜索的任何人的新代码。我发现这个article是一个很好的资源。

$.widget("custom.autoCompleteUserList", $.ui.autocomplete, {
    _renderItem: function (ul, item ) {

        if(item.ext != 'undefined' && typeof item.ext !== 'undefined'){
            var label = '<div class="ui-autocpmplete-item-wrapper"><span class="ui-autocpmplete-item-name-span">' + item.name + '</span><span class="ui-autocpmplete-item-ext-span"> (ext. ' + item.ext + ')</span></div>';
        } else {
            var label = '<div class="ui-autocpmplete-item-wrapper">' + item.name + '</div>';
        }

        return $( "<li>" )
            .attr( "data-value", item.id )
            .append( label)
            .appendTo( ul );
    }
});

$("#icwsTransferTo")
// don't navigate away from the field on tab when selecting an item
.bind( "keydown", function( event ) {
    if ( event.keyCode === $.ui.keyCode.TAB &&
        $( this ).autoCompleteUserList( "instance" ).menu.active ) {
      event.preventDefault();
    }
  }).autoCompleteUserList({
    minLength: 2,
    source: function(request, response) {

        $.ajax({    
            type: 'GET',
            url: 'index.php',       
            data: {method: 'userSearch', term: request.term},
            dataType: 'json',
            cache: false,
            timeout: 30000,
            success: function(data) { 

                if(!data){
                    return;
                }

                var finalSource = $.map(data, function(m) {
                return {
                        'name': m.configurationId.displayName,
                        'ext': m.extension,
                        'id': m.configurationId.id
                    };
                });

                response(finalSource);

            }
        }); 

    },
    focus: function() {
        // prevent value inserted on focus
        //return false;
    },
    select: function( event, ui ) {
            console.log(ui.item);
        alert(ui.item.value + ' < > ' + ui.item.label + ' was selected!!!');

    }
})