突出显示搜索词

Posted 2023-02-23

【中文标题】突出显示搜索词

【英文标题】：Hghlight search terms

【发布时间】：2015-01-02 10:24:51

【问题描述】：

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

@view_config(route_name="search", renderer='./templates/search.mako', permission="view") def 搜索（请求）： 搜索 = request.params.get("搜索", "") 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'

【参考方案1】：

至于高亮返回的搜索项，您必须使用 CSS 并更改背景颜色。所以像：

.highlighted 背景颜色：#FFFF00；

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

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

至于从数据库中检索 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

    

); 

);