Question

我使用jqueryui在我的网站上搜索就像facebook
一样 jquery代码：

//search main
function split( val ) {
    return val.split(  );
}
function extractLast( term ) {
    return split( term ).pop();
}
$( "#mainsearch" ).bind( "keydown", function( event ) {
    if ( event.keyCode === $.ui.keyCode.TAB &&
    $( this ).data( "ui-autocomplete" ).menu.active ) {
        event.preventDefault();
    }
})
.autocomplete({
    source: function( request, response ) {
        $.getJSON( "/block/search.php", {
            term: extractLast( request.term )
        }, response );
    },
    search: function() {
        var term = extractLast( this.value );
        if ( term.length < 2 ) {
            return false;
        }
    },
     focus: function() {
        return false;
    },
    select: function( event, ui ) {
        var terms = split( this.value );
        window.location.replace(ui.item.url);
        // remove the current input
        terms.pop();
        // add the selected item
        terms.push( ui.item.value );
        // add placeholder to get the comma-and-space at the end
        terms.push( "" );
        this.value = terms.join( ", " );
        return false;
    }
});

php代码：

while($f = mysqli_fetch_array($s,MYSQLI_ASSOC)){
    if($userid != $f['id']){
        $name = $f['name'].' '.$f['family'];
        $url = $siteurl.$f['username'].'/';
        array_push($results, array('id' => $f['id'],'value' => $name,'url' => $url));
    }
}
echo json_encode($results);

但如果我插入图像标签，如：

<img src='something'>

它只是显示＆lt; img＆gt;显示结果时，文字不是图像无论如何要解决它？谢谢

Answer 1

来自jQuery-ui docs：“如果您希望将标签视为html，则可以使用Scott González' html extension”。

Answer 2

好吧我用代码打击来解决这个问题：

function split( val ) {

function extractLast( term ) {
    return split( term ).pop();
}
$( "#mainsearch" ).autocomplete({
    source: function( request, response ) {
        $.getJSON( "/block/search.php", {
            term: extractLast( request.term )
        }, response );
    },
    search: function() {
        var term = extractLast( this.value );
        if ( term.length < 2 ) {
            return false;
        }
    },
     focus: function() {
        return false;
    },
    select: function( event, ui ) {
        var terms = split( this.value );
        window.location.replace(ui.item.url);
        // remove the current input
        terms.pop();
        // add the selected item
        terms.push( ui.item.value );
        // add placeholder to get the comma-and-space at the end
        terms.push( "" );
        this.value = terms.join( ", " );
        return false;
    }

})


 .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li style='clear:both'>" )
.append( "<a href='"+item.url+"' style='height:50px'><img style='float:right;height:50px;width:50px;vertical-align:middle;' src="+item.img+">"+item.value+"</a>")
.appendTo( ul );
};return val.split(  );
}

和php代码：

while($f = mysqli_fetch_array($s,MYSQLI_ASSOC)){
    if($userid != $f['id']){
        $name = $f['name'].' '.$f['family'];$img = getimagesizes($f['image'],50);
        $url = $siteurl.$f['username'].'/';
        array_push($results, array('id' => $f['id'],'img' => $img,'value' => $name,'url' => $url));
    }
}
echo json_encode($results);

.data必须转换为html并显示结果
正如你在jqueryui的qustion示例中所看到的那样，这完全不同但是有了这个，你可以把html放在你的自动完成中：）

在自动完成jqueryUi中显示html

2 个答案: