jquery autocomplete 如何实现添加图片呢 高分

Question

类似 这样的效果 我想用jQuery autocomplete 来实现 

Answer 1

[align=left]
你本身應該有個國旗圖片的文件夾.
預先有個表存好國家名字和國旗名字的對應信息.
實現這個功能方法有兩種:
1.直讀數據庫(如果訪問量不大數據庫又夠猛的話).
  每次異步LIKE出來.把信息返回頁面讓腳本加載出來.
2.用Lucene.在數據庫數據完整的情況下把數據導成Lucene用的Document.
  每次腳本觸發的時候只是去Document拿信息.一樣是把信息返回頁面讓腳本加載.
[/align]

Answer 2

这个倒是很好做，关键是你返回数据问题。
第一步：修改源代码打开autocomplete.js 在第407行左右
.append( $( "<a></a>" ).text( item.label ) )
=====改为=====
.append( $( "<a></a>" ).html( item.label ) )
第二步：在你返回的数据里添加入图片的html如：
["<img src='http://www.iconpng.com/png/object-icons48/usa-flag.png'>美国","<img src='http://www.iconpng.com/png/fatcow/italy.png'>意大利"]
不过需要注意的是当你选中值时是直接得到“<img src='http://www.iconpng.com/png/object-icons48/usa-flag.png'>美国”所以你得过滤一下html。修改方法：
autocomplete.js 在第205行左右
if ( false !== self._trigger( "select", event, { item: item } ) ) {
     //self.element.val( item.value );
     self.element.val( item.value.replace(/<\/?[^>]*>/g,'') );//过滤html
}