在结果上创建省略号和关键字匹配

Question

我遇到了如何制作这些解决方案的问题

第一个是，每当用户输入超过10个字符时，我想要“省略号（...）”。这是我的代码Jquery代码

$("#input").bind("keypress keydown", function(){
setTimeout(function(){
    $("#results").text($("#input").val());
},0);

}）;

这是我的html标签

Enter Character here: <input type="text" id="input">
Search Results: <input type="text" id="search">
<div id="result"></div>

第二个是，我想要突出显示我创建的搜索输入上匹配的字词。就像谷歌搜索一样。每当您输入关键字时，它都会在搜索结果中突出显示这些关键字。

jsfiddle：https://jsfiddle.net/deanilvincent/gm4k3hbe/

Answer 1

我个人会使用CSS的text-overflow属性在文本不适合容器时添加省略号：

p {
    overflow: hidden;
    text-overflow: ellipsis;
}

但我已经演示了如何在小提琴中使用javascript。我还为你的第二个问题添加了一个例子：

Edited fiddle