自動完成：以不同顏色顯示未完成的字符

我正在嘗試使用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";

對於exhample：（照片）

能否請你幫我！在此先感謝！

來源

2016-09-14 Klajdi Dosti

嘗試'$（ 'UI的自動完成' ）.css（'color'，'red'）;'顏色爲紅色 – KingRider

這是你正在嘗試做一個簡單的例子：

$(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>

來源

2016-09-14 10:17:39 mrid

我想php功能，而不是css代碼 –

你的意思是javascript？ – mrid

這不是解決方案，因爲我希望沒有完成的字符在不同的顏色。 –

試着這麼做：

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

來源

2016-09-14 08:25:51

自動完成：以不同顏色顯示未完成的字符

回答

相關問題