如何仅突出显示 Jquery 自动完成匹配的单词?
How to highlight Jquery Autocomplete matched word only?
我正在使用 Jquery 自动完成功能来搜索列表,它工作正常,但我只需要突出显示列表中匹配单词的背景,我怎么才能点这个?
这是我目前尝试过的方法。
fiddle link
var availableTags = [
'DHA ABC',
'DHA BB',
'DHA CC',
];
$('#tags').autocomplete({
source: availableTags,
search: function(event, ui) {
$('#wrapper').empty();
},
select: function(e, ui) {
$(this).val(ui.item.name);
return false;
},
}).data('autocomplete')._renderItem = function(ul, item) {
matchFound = 0;
var cls = this.options.highlightClass;
var inp = $("#tags").val().split(" ");
var template = "<span class='" + cls + "'></span>";
var items = item.label.split(" ");
for (var i = 0; i < items.length; i++) {
for (var j = 0; j < inp.length; j++) {
index = items[i].toUpperCase().indexOf(inp[j].toUpperCase());
if (index > -1) {
matchFound += 1;
}
}
if (matchFound == inp.length) {
return $('<div class="element"></div>')
.data('item.autocomplete', item.label)
.append('<a href="#">' + item.label + '</a>')
.appendTo($('#wrapper'));
break;
}
}
};
非常简单,您只需将属性设置为 div,如下所示
<div class="element" style="background-color:green; width:30%;"></div>
你的代码应该是这样的。
var availableTags = [
'DHA 11 Rahbar',
'DHA City',
'DHA Defence',
'Dhalloke',
'Dharampura',
'DHA 11 Rahbar Phase 1',
'DHA 11 Rahbar Phase 2',
'DHA 11 Rahbar Phase 2 Extension',
'DHA 9 Town',
'DHA Phase 1',
'DHA Phase 10',
'DHA Phase 10',
'DHA Phase 11 - Halloki Gardens',
'DHA Phase 2',
'DHA Phase 3',
'DHA Phase 4',
'DHA Phase 5',
'DHA Phase 6',
'DHA Phase 7',
'DHA Phase 8',
'DHA Phase 9 Prism',
'DHA - EME Cottages'
];
$('#tags').autocomplete({
source: availableTags,
search: function(event, ui) {
$('#wrapper').empty();
},
select: function(e, ui) {
$(this).val(ui.item.name);
return false;
},
})
.data('autocomplete')._renderItem = function(ul, item) {
matchFound = 0;
var cls = this.options.highlightClass;
var inp = $("#tags").val().split(" ");
var template = "<span class='" + cls + "'></span>";
var items = item.label.split(" ");
for (var i = 0; i < items.length; i++) {
for (var j = 0; j < inp.length; j++) {
index = items[i].toUpperCase().indexOf(inp[j].toUpperCase());
if (index > -1) {
matchFound += 1;
}
}
if (matchFound == inp.length) {
return $('<div class="element" style="background-color:green; width:30%;"></div>')
.data('item.autocomplete', item.label)
.append('<a href="javascript:void(0);">' + item.label + '</a>')
.appendTo($('#wrapper'));
break;
}
}
};
检查这个fiddle
var availableTags = [
'DHA 11 Rahbar',
'DHA City',
'DHA Defence',
'Dhalloke',
'Dharampura',
'DHA 11 Rahbar Phase 1',
'DHA 11 Rahbar Phase 2',
'DHA 11 Rahbar Phase 2 Extension',
'DHA 9 Town',
'DHA Phase 1',
'DHA Phase 10',
'DHA Phase 10',
'DHA Phase 11 - Halloki Gardens',
'DHA Phase 2',
'DHA Phase 3',
'DHA Phase 4',
'DHA Phase 5',
'DHA Phase 6',
'DHA Phase 7',
'DHA Phase 8',
'DHA Phase 9 Prism',
'DHA - EME Cottages'
];
$('#tags').autocomplete({
source: availableTags,
search: function(event, ui) {
$('#wrapper').empty();
},
select: function(e, ui) {
$(this).val(ui.item.name);
return false;
},
})
.data('autocomplete')._renderItem = function(ul, item) {
matchFound = 0;
var cls = this.options.highlightClass;
var inp = $("#tags").val().split(" ");
var template = "<span class='" + cls + "'></span>";
var items = item.label.split(" ");
for (var i = 0; i < items.length; i++) {
for (var j = 0; j < inp.length; j++) {
index = items[i].toUpperCase().indexOf(inp[j].toUpperCase());
if (index > -1) {
matchFound += 1;
}
}
if (matchFound == inp.length) {
var str=item.label;
str = str.replace(inp[0], '<span style="color: yellow;">'+inp[0]+'</span>');
// console.log(inp);
return $('<div class="element">'+str+'</div>')
.data('item.autocomplete', str)
// .append('<a href="#">' + item.label + '</a>')
.appendTo($('#wrapper'));
}
}
};
body {
font-size: 12px;
}
#wrapper {
margin-top: 50px;
}
.element {
border: 1px solid PowderBlue;
}
.ui-autocomplete {
display: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/sunny/jquery-ui.css" rel="stylesheet"/>
<label for="tags">Tags:</label>
<input id="tags" />
<div id="wrapper"></div>
fiddle : http://jsfiddle.net/sumeshnu/gwethjq0/
使用 span 标签将标签中的匹配字符替换为背景色
我为您的案例创建了示例 fiddle,其中包含突出显示的关键功能
function highlite(label, substring) {
var start = label.toLowerCase().indexOf(substring.toLowerCase());
var end = start + substring.length;
label = label.substr(0, start) +
'<span class="highlite">' +
label.substr(start, end - start) +
'</span>' +
label.substr(end);
return label;
}
我正在使用 Jquery 自动完成功能来搜索列表,它工作正常,但我只需要突出显示列表中匹配单词的背景,我怎么才能点这个?
这是我目前尝试过的方法。 fiddle link
var availableTags = [
'DHA ABC',
'DHA BB',
'DHA CC',
];
$('#tags').autocomplete({
source: availableTags,
search: function(event, ui) {
$('#wrapper').empty();
},
select: function(e, ui) {
$(this).val(ui.item.name);
return false;
},
}).data('autocomplete')._renderItem = function(ul, item) {
matchFound = 0;
var cls = this.options.highlightClass;
var inp = $("#tags").val().split(" ");
var template = "<span class='" + cls + "'></span>";
var items = item.label.split(" ");
for (var i = 0; i < items.length; i++) {
for (var j = 0; j < inp.length; j++) {
index = items[i].toUpperCase().indexOf(inp[j].toUpperCase());
if (index > -1) {
matchFound += 1;
}
}
if (matchFound == inp.length) {
return $('<div class="element"></div>')
.data('item.autocomplete', item.label)
.append('<a href="#">' + item.label + '</a>')
.appendTo($('#wrapper'));
break;
}
}
};
非常简单,您只需将属性设置为 div,如下所示
<div class="element" style="background-color:green; width:30%;"></div>
你的代码应该是这样的。
var availableTags = [
'DHA 11 Rahbar',
'DHA City',
'DHA Defence',
'Dhalloke',
'Dharampura',
'DHA 11 Rahbar Phase 1',
'DHA 11 Rahbar Phase 2',
'DHA 11 Rahbar Phase 2 Extension',
'DHA 9 Town',
'DHA Phase 1',
'DHA Phase 10',
'DHA Phase 10',
'DHA Phase 11 - Halloki Gardens',
'DHA Phase 2',
'DHA Phase 3',
'DHA Phase 4',
'DHA Phase 5',
'DHA Phase 6',
'DHA Phase 7',
'DHA Phase 8',
'DHA Phase 9 Prism',
'DHA - EME Cottages'
];
$('#tags').autocomplete({
source: availableTags,
search: function(event, ui) {
$('#wrapper').empty();
},
select: function(e, ui) {
$(this).val(ui.item.name);
return false;
},
})
.data('autocomplete')._renderItem = function(ul, item) {
matchFound = 0;
var cls = this.options.highlightClass;
var inp = $("#tags").val().split(" ");
var template = "<span class='" + cls + "'></span>";
var items = item.label.split(" ");
for (var i = 0; i < items.length; i++) {
for (var j = 0; j < inp.length; j++) {
index = items[i].toUpperCase().indexOf(inp[j].toUpperCase());
if (index > -1) {
matchFound += 1;
}
}
if (matchFound == inp.length) {
return $('<div class="element" style="background-color:green; width:30%;"></div>')
.data('item.autocomplete', item.label)
.append('<a href="javascript:void(0);">' + item.label + '</a>')
.appendTo($('#wrapper'));
break;
}
}
};
检查这个fiddle
var availableTags = [
'DHA 11 Rahbar',
'DHA City',
'DHA Defence',
'Dhalloke',
'Dharampura',
'DHA 11 Rahbar Phase 1',
'DHA 11 Rahbar Phase 2',
'DHA 11 Rahbar Phase 2 Extension',
'DHA 9 Town',
'DHA Phase 1',
'DHA Phase 10',
'DHA Phase 10',
'DHA Phase 11 - Halloki Gardens',
'DHA Phase 2',
'DHA Phase 3',
'DHA Phase 4',
'DHA Phase 5',
'DHA Phase 6',
'DHA Phase 7',
'DHA Phase 8',
'DHA Phase 9 Prism',
'DHA - EME Cottages'
];
$('#tags').autocomplete({
source: availableTags,
search: function(event, ui) {
$('#wrapper').empty();
},
select: function(e, ui) {
$(this).val(ui.item.name);
return false;
},
})
.data('autocomplete')._renderItem = function(ul, item) {
matchFound = 0;
var cls = this.options.highlightClass;
var inp = $("#tags").val().split(" ");
var template = "<span class='" + cls + "'></span>";
var items = item.label.split(" ");
for (var i = 0; i < items.length; i++) {
for (var j = 0; j < inp.length; j++) {
index = items[i].toUpperCase().indexOf(inp[j].toUpperCase());
if (index > -1) {
matchFound += 1;
}
}
if (matchFound == inp.length) {
var str=item.label;
str = str.replace(inp[0], '<span style="color: yellow;">'+inp[0]+'</span>');
// console.log(inp);
return $('<div class="element">'+str+'</div>')
.data('item.autocomplete', str)
// .append('<a href="#">' + item.label + '</a>')
.appendTo($('#wrapper'));
}
}
};
body {
font-size: 12px;
}
#wrapper {
margin-top: 50px;
}
.element {
border: 1px solid PowderBlue;
}
.ui-autocomplete {
display: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/sunny/jquery-ui.css" rel="stylesheet"/>
<label for="tags">Tags:</label>
<input id="tags" />
<div id="wrapper"></div>
fiddle : http://jsfiddle.net/sumeshnu/gwethjq0/
使用 span 标签将标签中的匹配字符替换为背景色
我为您的案例创建了示例 fiddle,其中包含突出显示的关键功能
function highlite(label, substring) {
var start = label.toLowerCase().indexOf(substring.toLowerCase());
var end = start + substring.length;
label = label.substr(0, start) +
'<span class="highlite">' +
label.substr(start, end - start) +
'</span>' +
label.substr(end);
return label;
}