jQuery的自动完成插件 - 自定义的功能亮点 [英] jQuery autocomplete plugin - custom highlight function

问题描述

我为每个项目自动完成结果看起来是这样的：

 ＆LT; H3＆GT;名人抽奖＆LT; / H3和GT;＆LT; P＆GT; 0＆发作LT; / P＆GT;
 

不过，我想只有标题里面的H3加以强调。请参阅下面的亮点功能。我不知道如何更改原来的正则表达式只有标题内更换。

  $（。show_autocomplete）。自动完成（/ shows.js，{
        minChars：2，
        最大：100，
  formatItem：函数（项目，指数，总，查询）{
    回归＆LT; H3＆gt;中+ item.title +＆下; / H3＆GT;＆所述; P＆gt;中+ item.episodes +情节＆LT; / P＆gt;中
  }，
  formatMatch：函数（项目）{
    返回item.title;
  }，
  formatResult：函数（项目）{
    返回item.title;
  }，
  数据类型：JSON，
  解析：功能（数据）{
    返回$ .MAP（数据，功能（项目）{
      返回{
        数据项，
        值：item.title，
        结果：item.title
      }
    }）;
  }，
  亮点：功能（值，期限）{
    变种标题= value.split（＆下; / H3＆gt;中）[0] .replace（＆所述; H3＆gt;中，）; //只有这里面更换？
    返回value.replace（新正则表达式（（[^＆放大器;;] +;？！）（小于！[^＆所述;]的计算值*）（+ term.replace（/（[\\ ^ \\ $ \\ 。？！（\\）\\ [\\] \\ {\\} \\ * \\ \\ + \\ \\ | \\\\]）/ GI，\\\\ $ 1）+​​）（[^＆所述;]的计算值* GT; ？！）（[^＆放;;] +），GI），＆LT;强＆GT; $ 1 LT; / STRONG＆gt;中）; //原来的正则表达式
  }
}）;
 

解决方案

为什么使它更难比它是正确的？ :)这是我从你的想法得到了伟大工程：

  formatItem：函数（项目，指数，总，查询）{
    回归＆LT; H3＆GT;＆LT; A HREF = \\/显示/+ item.permalink +\\＆gt;中+ item.title +＆下; / A＆GT;＆下; / H3＆GT;＆所述; P＆gt;中+ item.followers +追随者|+ item.episodes +情节＆LT; / P＆gt;中
  }，  亮点：功能（值，期限）{
    VAR值= $（值）;
    。value.find（A）HTML（value.find（A）HTML（）取代（正则表达式（术语，GI），＆LT;强＆gt;中。+长期+＆LT; / STRONG＆GT; ））;
    返回值;
  }
 

My autocomplete results for each item looks something like this:

<h3>Celebrity Sweepstakes</h3><p>0 episodes</p>

But I want only the title inside the H3 to be highlighted. See the 'highlight' function below. I'm not sure how to change that original RegExp to only replace inside the title.

$(".show_autocomplete").autocomplete("/shows.js", {
        minChars: 2,
        max: 100,
  formatItem:function(item, index, total, query){
    return "<h3>" + item.title + "</h3><p>" + item.episodes + " episodes</p>"
  },
  formatMatch:function(item){
    return item.title;
  },
  formatResult:function(item){
    return item.title;
  },
  dataType:'json',
  parse:function(data) {
    return $.map(data, function(item) {
      return {
        data: item,
        value: item.title,
        result: item.title
      }
    });
  },
  highlight: function(value, term) {
    var title = value.split("</h3>")[0].replace("<h3>", ""); //only replace inside this?
    return value.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"); //original regexp
  }
}); 

解决方案

Why make it harder than it is right? :) This is what I got from your idea and works great:

  formatItem:function(item, index, total, query){
    return "<h3><a href=\"/show/" + item.permalink + "\">" + item.title + "</a></h3><p>" + item.followers + " followers | " + item.episodes + " episodes</p>"
  },

  highlight: function(value, term) {
    var value = $(value);
    value.find("a").html(value.find("a").html().replace(RegExp(term, "gi"), "<strong>" + term + "</strong>"));
    return value;
  }

这篇关于jQuery的自动完成插件 - 自定义的功能亮点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！