自动完成：以不同的颜色显示未完成的字符答案

【问题标题】：Autocomplete: show not completed characters in a different color自动完成：以不同的颜色显示未完成的字符
【发布时间】：2016-09-14 08:03:16
【问题描述】：

我正在尝试使用 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";

例如：（照片）

你能帮帮我吗！提前致谢！

【问题讨论】：

尝试将$('.ui-autocomplete').css('color','red'); 染成红色

标签： javascript php jquery ajax autocomplete

【解决方案1】：

尝试类似：

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

【讨论】：

【解决方案2】：

这是您尝试做的一个基本示例：

$(document).ready(function () {
 
    /* initially hide product list items */
    $("#dino-list li").hide();
 
    /* highlight matches text */
    var highlight = function (string) {
        $("#dino-list li.match").each(function () {
            var matchStart = $(this).text().toLowerCase().indexOf("" + string.toLowerCase() + "");
            var matchEnd = matchStart + string.length - 1;
            var beforeMatch = $(this).text().slice(0, matchStart);
            var matchText = $(this).text().slice(matchStart, matchEnd + 1);
            var afterMatch = $(this).text().slice(matchEnd + 1);
            $(this).html("<em>" + beforeMatch + "</em>" + matchText + "<em>" + afterMatch + "</em>");
        });
    };
 
 
    /* filter products */
    $("#search-dinosaurs").on("keyup click input", function () {
        if (this.value.length > 0) {
            $("#dino-list li").removeClass("match").hide().filter(function () {
                return $(this).text().toLowerCase().indexOf($("#search-dinosaurs").val().toLowerCase()) != -1;
            }).addClass("match").show();
            highlight(this.value);
            $("#dino-list").show();
        }
        else {
            $("#dino-list, #dino-list li").removeClass("match").hide();
        }
    });
 
 
});

input[type=text]{
  width:200px;
  padding:8px 10px;
}

li{ list-style-type: none; }

li em {
  font-weight:bold;
  font-style:normal;
}

ul {
   padding-left: 10px;
   background: yellow;
   top: -15px;
   position: relative;
   width: 214px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search-dinosaurs" placeholder="Search for Dinosaurs (start typing)" />
 
<ul id="dino-list">
  <li>Diplodocus</li>
  <li>Stegosaurus</li>
  <li>Triceratops</li>
  <li>Pteradactyl</li>
  <li>Tyrannosaurus Rex</li>
  <li>Protoceratops</li>
  <li>Iguanadon</li>
  <li>Velociraptor</li>
</ul>

【讨论】：

你的意思是javascript？
这不是解决方案，因为我希望未完成的字符具有不同的颜色。
立即查看。如果这不是你想要的，你能详细说明你还想要什么吗？