2013-12-16 111 views
0

我使用jQueryUI的搜索在我的網站就像Facebook的
jQuery代碼:顯示HTML中自動完成jQueryUI的

//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'> 

其只是顯示< img> text not an圖像當其顯示結果
有反正要解決嗎?
謝謝

+1

那個自動完成的東西與圖像有什麼關係? –

+0

返回的JSON是什麼樣的?你絕對可以做到這一點,但你可能需要自動完成的自定義渲染功能。 – Mathletics

+1

相關:http://forum.jquery.com/topic/using-html-in-autocomplete – Adrift

回答

0

確定我解決這個問題的代碼的打擊:

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); 

。數據必須轉換爲HTML並顯示你的結果
,你可以在我的qustion看在jqueryui中的例子是完全不同的這個
但與此你可以把你的自動完成的HTML :)