Hghlight搜索字词

Question

1.如何突出显示返回的搜索项或结果中的数据，例如ctr + f在打开文件中对普通项/元素搜索的处理方式。 2.添加json自动完成功能，即在用户根据数据库数据输入搜索栏时给出建议这是我的视图代码，但它所做的只是返回结果而没有真正突出显示搜索词。 任何帮助说明：

@view_config（route_name =“ search”，renderer ='。/ templates / search.mako'，Permission =“ view”）def search（request）：search = request.params.get（“ search”，“”）
dbsession = DBSession（）

##Album Results
query = dbsession.query(Album).join(Artist).join(Genre).join(Song).\
    filter(

        or_(
            Album.album_name.like(search + "%"),
            Artist.artist.like(search + "%"),
            Genre.genre.like(search + "%"),

            )
        )
statalbum = dbsession.query(Album).join(Artist).join(Genre).join(Song).\
    filter(

        or_(
            Album.album_name.like(search + "%"),
            Artist.artist.like(search + "%"),
            Genre.genre.like(search + "%"),

            )
        ).count()

# Songs Results

dbsession = DBSession()
songs = dbsession.query(Song).\
    filter(Song.title.like(search + "%") )

statsong = dbsession.query(Song).\
    filter(Song.title.like(search + "%") ).count()

# paginate 
page_url = paginate.PageURL_WebOb(request)
albums = Page(query, 
                 page=int(request.params.get("page", 1)), 
                 items_per_page=12, 
                 url=page_url)
# paginate songs
songs = Page(songs, 
                 page=int(request.params.get("page", 1)), 
                 items_per_page=12, 
                 url=page_url)
try:
    genres = DBSession.query(Genre).order_by(Genre.genre).all()
    info = DBSession.query(Song).join(Album).filter_by(id=id).filter(Song.album_id == Album.id ).first()
    #albums = DBSession.query(Album).all() 

except DBAPIError:
    return Response(conn_err_msg, content_type='text/plain', status_int=500)
return {  'genres':genres, 'info':info, 'songs':songs, 'albums':albums, 'statsong':statsong, 'statalbum':statalbum, 'project': 'beatstore'}

Answer 1

1. 至于突出显示返回的搜索项，则必须使用CSS并更改背景颜色。 所以像这样：

   .highlighted {background-color：＃FFFF00; }

   并突出显示一个单词，您必须将其用一个突出显示的类括在一个跨度中，如下所示：

    <span class="highlighted">This is highlighted text</span> 

2. 至于从数据库中检索JSON，则必须从Javascript创建一个AJAX调用，该调用将调用服务器以获取建议。 您可能必须在按键事件上绑定AJAX调用； 就像是：

   $（“＃text-field”）。keyup（function（）{

    $.getJSON("/url_to_suggestions", function(data) { $.each(data, function(key, val) { //Do something with key and val } ); 

   }）;