javascript - 自动完成:以不同的颜色显示未完成的字符

标签 javascript php jquery ajax autocomplete

我正在尝试使用ajax进行自动完成搜索。我希望字符不需要出现不同的颜色(黑色)。

<script>
function showResult(str) {
  if (str.length==0) { 
    document.getElementById("livesearch").innerHTML="";
    document.getElementById("livesearch").style.border="0px";
    return;
  }
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else {  // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
      document.getElementById("livesearch").innerHTML=this.responseText;
      document.getElementById("livesearch").style.border="1px solid #A5bCB2";
    }
  }
  xmlhttp.open("GET","livesearch.php?q="+str,true);
  xmlhttp.send();
}
</script>
<body>

<form>
<input type="text" size="30" onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>

</body>

我的 livesearch.php 看起来像:

    echo "Tirana";
    echo "Tepelene";
    echo "Korca";
   echo "Skrapar";

例如:(照片)

enter image description here

你能帮帮我吗? 提前致谢!

最佳答案

尝试如下:

var pattern = "(^|\s)(" + str+ ")(\s|$)";
var regexp = new RegExp(pattern,"ig");
this.responseText.replace(regexp, '$1<b>$2</b>$3');

关于javascript - 自动完成:以不同的颜色显示未完成的字符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39485379/

相关文章:

php - 数组初始化中的正确缩进,PDT/Zend Studio

php - 如何显示结果

提交表单时的 Javascript 转换?

javascript - 用数组中的对象制作表格?

javascript - 无法读取未定义 Node.js 和 Jade 的属性 'length'

javascript - JQuery获取元素.height()然后减去100vh?

每个浏览器请求多次执行 php 脚本

javascript - 如何在 jquery 或 angularjs 中获取具有特定属性的标签名称的元素

javascript - 下拉更改时 Angular js文本框值为空

php - jQuery:使用 PHP 进行点击跟踪