javascript - 下拉列表单击元素以在文本框中显示粗体然后键入正常

<分区>

当键入文本显示下拉列表单击时，它将在文本框中显示粗体字母，然后连续键入普通字母，只允许不带按钮的粗体字母。

例如。 Java世界

 $(function(){
    var availableName = ["Java","Javascript","PHP","HTML","CSS","Angularjs","SQL",".Net"];
    $( "#uname" ).autocomplete({
      source: availableName
    });
});

body {
  background-color: powderblue; 
  color: Darkblack;
}
h2 {
  color: #000080; 
  font-size: 300%;
}
.name{
  font-weight: bold;
}

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<div class="row">
    <form align="center">
        <br> <label for="name"> Name: </label>
        <input class="name" type="text" id="uname"> <br>
    </form>
</div>

最佳答案

请看我的解决方案:jsfiddle

$(document).ready(function () { 
  $("#suggest").autocomplete({
    delay: 100,
    source:["Java","Javascript","PHP","HTML","CSS","Angularjs","SQL",".Net"]
  }).data( "autocomplete" )._renderItem = function( ul, item ) {
    var term = this.element.val(),
        regex = new RegExp( '(' + term + ')', 'gi' );
    t = item.label.replace( regex , "<b>$&</b>" );
    return $( "<li></li>" ).data("item.autocomplete", item)
        .append( "<a style='height:30px;'>" + t + "</a>")
        .appendTo( ul );
  };
});

希望这对您有所帮助!

关于javascript - 下拉列表单击元素以在文本框中显示粗体然后键入正常，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40135040/

上一篇：css - 如何使用 Angular Material 确保边距相等？ (md-grid-list md-grid-tile md-rowspan)

下一篇：html - 如何将子域 Assets 用于另一个子域

javascript - 如何使用jquery计算html表中的行

javascript - 在生成的 HTML Ruby on Rails 中，参数列表 onclick 之后缺少 )

javascript/jquery 从计数数组构建数组

javascript - 如何正确编码书签脚本

javascript - 在 JSFiddle 中加载 Facebook API

javascript - 如何遍历多个选择的多个选项？

javascript - AngularJS 将类添加到 <td> 中，该类由 ngRepeat 从数据库动态生成

javascript - 在单个页面上加载多个谷歌地图

javascript - 数组函数类型语法