我有一个突出显示jquery脚本，它突出显示你在上面的两个输入中输入的文字中的单词....现在我想在html标签中设置第二个带有预加载值的输入（value =“something”），立即突出显示文本文档加载后....
我目前的情况是：http://jsfiddle.net/dzorz/bZYqK/
<body>
<input type="text" class="span1 disabled" id="field1" name="field1">
<br>
<input type="text" class="span1 disabled" id="field2" name="field2" value="rhoncus quis porta">
<br>
<p>
Vestibulum rhoncus urna sed urna euismod, ut cursus erüos molestie.
Nulla sed ante ut diam gravida auctor eu quis augue. Donec egäet diam
malesuada, consectetur orci at, ultrices tellus. Duis id dui vel sem
consequat rutrum eget non orci. Nullam sit amet libero odiö.
Vestibulum sapien sapien, molestie quis porta nec, sodales nec felis.
Mauris vehicula, erat eu consectetur viverra, dui tellus laoreet
dolor, quis faucibus turpis eros non mi.
</p>
</body>
$(function () {
$('#field1').bind('keyup change', function (ev) {
// pull in the new value
var searchTerm = $(this).val();
// remove any old highlighted terms
$('body').removeHighlight('span.highlight1');
// disable highlighting if empty
if (searchTerm) {
var terms = searchTerm.split(/(\s)/);
$.each(terms, function (_, term) {
// highlight the new term
term = term.trim();
if (term != "") $('body').highlight(term, 'highlight1');
});
}
});
$('#field2').bind('keyup change', function (ev) {
// pull in the new value
var searchTerm = $(this).val();
// remove any old highlighted terms
$('body').removeHighlight(['span.highlight2']);
// disable highlighting if empty
if (searchTerm) {
var terms = searchTerm.split(/\W+/);
$.each(terms, function (_, term) {
// highlight the new term
term = term.trim();
if (term != "") $('body').highlight(term, 'highlight2');
});
}
});
});
jQuery.fn.highlight = function (pat, className) {
function innerHighlight(node, pat) {
var skip = 0;
if (node.nodeType == 3) {
var pos = node.data.toUpperCase().indexOf(pat);
if (pos >= 0) {
var spannode = document.createElement('span');
spannode.className = className || 'highlight';
var middlebit = node.splitText(pos);
var endbit = middlebit.splitText(pat.length);
var middleclone = middlebit.cloneNode(true);
spannode.appendChild(middleclone);
middlebit.parentNode.replaceChild(spannode, middlebit);
skip = 1;
}
} else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
for (var i = 0; i < node.childNodes.length; ++i) { i += innerHighlight(node.childNodes[i], pat); }
}
return skip;
}
return this.each(function () {
innerHighlight(this, pat.toUpperCase());
});
};
jQuery.fn.removeHighlight = function (classNames) {
function newNormalize(node) {
for (var i = 0, children = node.childNodes, nodeCount = children.length; i < nodeCount; i++) {
var child = children[i];
if (child.nodeType == 1) {
newNormalize(child);
continue;
}
if (child.nodeType != 3) { continue; }
var next = child.nextSibling;
if (next == null || next.nodeType != 3) { continue; }
var combined_text = child.nodeValue + next.nodeValue;
new_node = node.ownerDocument.createTextNode(combined_text);
node.insertBefore(new_node, child);
node.removeChild(child);
node.removeChild(next);
i--;
nodeCount--;
}
}
var selectors = classNames;
if(Object.prototype.toString.call(classNames) === '[object Array]') selectors = classNames.join(',');
return this.find(selectors).each(function () {
var thisParent = this.parentNode;
thisParent.replaceChild(this.firstChild, this);
newNormalize(thisParent);
}).end();
};
.highlight2, .highlight1 {
background-color: #fff34d;
-moz-border-radius: 5px;
/* FF1+ */
-webkit-border-radius: 5px;
/* Saf3-4 */
border-radius: 5px;
/* Opera 10.5, IE 9, Saf5, Chrome */
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
/* FF3.5+ */
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
/* Saf3.0+, Chrome */
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
/* Opera 10.5+, IE 9.0 */
}
.highlight2, .highlight1 {
padding:1px 4px;
margin:0 -4px;
}
.highlight2 {
background-color: #cecece;
}
在窗口加载，文档就绪或带键的东西上设置这些输入是否可能？我不确定....请帮帮我
你可以更新我的jsfiddle
答案 0 :(得分：2)
使用.triggerHandler（）jquery的方法：
{如果是你的jsfiddle，你必须在调用之前设置方法，或者在HEAD中使用wrap}
.triggerHandler('change')
答案 1 :(得分：1)
你正在使用足够晚的jQuery版本，我会切换到.on，将重复的函数移动到它自己的方法中，通过委托分配，然后简单地触发状态“更改”。哦，在输入之间添加一个公共类名来选择。
我的意思是：
/* Be sure to include plugin BEFORE this script */
// function to highlight words based on input
function setHighlight(e) {
// pull in the new value
var searchTerm = $(this).val();
// remove any old highlighted terms
$('body').removeHighlight('span.highlight1');
// disable highlighting if empty
if (searchTerm) {
var terms = searchTerm.split(/(\s)/);
$.each(terms, function (_, term) {
// highlight the new term
term = term.trim();
if (term != "") {
// this will check the id of your inputs for proper highlight class to add to body
switch ($this.prop("id")) {
case "field1":
$('body').highlight(term, 'highlight1');
break;
case "field2":
$('body').highlight(term, 'highlight2');
break;
}
}
});
}
}
$(function () {
// delegate method to keyup and change for all elements having the class ".inp-highlight"
// "inp-highlight" is the class name I used in my example (see jsFiddle link)
$(document).on("keyup change", ".inp-highlight", setHighlight);
// with the method asigned and text already in the value of the box, I need only call for change method
$("#field2").change();
// Thanks to jQuery "chaining", you could also insert the text and call change as:
// $("#field2").text("Text to search for on load!").change();
});
jQuery.fn.highlight = function (pat, className) {
function innerHighlight(node, pat) {
var skip = 0;
if (node.nodeType == 3) {
var pos = node.data.toUpperCase().indexOf(pat);
if (pos >= 0) {
var spannode = document.createElement('span');
spannode.className = className || 'highlight';
var middlebit = node.splitText(pos);
var endbit = middlebit.splitText(pat.length);
var middleclone = middlebit.cloneNode(true);
spannode.appendChild(middleclone);
middlebit.parentNode.replaceChild(spannode, middlebit);
skip = 1;
}
}
else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
for (var i = 0; i < node.childNodes.length; ++i) { i += innerHighlight(node.childNodes[i], pat); }
}
return skip;
}
return this.each(function () {
innerHighlight(this, pat.toUpperCase());
});
};
jQuery.fn.removeHighlight = function (classNames) {
function newNormalize(node) {
for (var i = 0, children = node.childNodes, nodeCount = children.length; i < nodeCount; i++) {
var child = children[i];
if (child.nodeType == 1) {
newNormalize(child);
continue;
}
if (child.nodeType != 3) { continue; }
var next = child.nextSibling;
if (next == null || next.nodeType != 3) { continue; }
var combined_text = child.nodeValue + next.nodeValue;
new_node = node.ownerDocument.createTextNode(combined_text);
node.insertBefore(new_node, child);
node.removeChild(child);
node.removeChild(next);
i--;
nodeCount--;
}
}
var selectors = classNames;
if(Object.prototype.toString.call(classNames) === '[object Array]') selectors = classNames.join(',');
return this.find(selectors).each(function () {
var thisParent = this.parentNode;
thisParent.replaceChild(this.firstChild, this);
newNormalize(thisParent);
}).end();
};
function setHighlight(e) {
var searchTerm = $(this).val();
$('body').removeHighlight('span.highlight1');
if (searchTerm) {
var terms = searchTerm.split(/(\s)/);
$.each(terms, function (_, term) {
// highlight the new term
term = term.trim();
if (term != "") {
switch ($this.prop("id")) {
case "field1":
$('body').highlight(term, 'highlight1');
break;
case "field2":
$('body').highlight(term, 'highlight2');
break;
}
}
});
}
}
$(function () {
$(document).on("keyup change", ".inp-highlight", setHighlight);
$("#field2").change();
});
分裂
有几种方法可以消除空间上的分裂。选项一就像将“setHighlight”功能更改为以下内容一样简单：
function setHighlight(e) {
var searchTerm = $(this).val().trim();
$('body').removeHighlight('span.highlight1');
if (searchTerm) {
switch ($this.prop("id")) {
case "field1":
$('body').highlight(searchTerm, 'highlight1');
break;
case "field2":
$('body').highlight(searchTerm, 'highlight2');
break;
}
}
}
这将不再检查拆分空格。相反，它将始终搜索给定的任何文本。请参阅示例和注释我将预加载的值更改为可在加载时找到的值。
第二个选项可能是一起更改功能。这也意味着改变方法被“分配”的方式，因此您需要将输入或其值作为参数传递。这可以允许在给定角色（如空间）上分裂的“选项”;改变就像：
// change the following line in the load function
// $(document).on("keyup change", ".inp-highlight", setHighlight);
// to
$(document).on("keyup change", ".inp-highlight", function(e) { setHighlight($(this)); });
// given the new method function, if you wanted to split by space,
// the call would be
// setHighlight($(this), " ");
然后将setHighlight方法更改为：
function setHighlight($this, splitChar) {
var searchTerm = $this.val().trim(),
highlight = function(id, value) {
switch (id) {
case "field1":
$('body').highlight(value, 'highlight1');
break;
case "field2":
$('body').highlight(value, 'highlight2');
break;
}
};
$('body').removeHighlight('span.highlight1');
if (searchTerm != "") {
if (splitChar) {
var terms = searchTerm.split(/(\s)/);
$.each(terms, function (_, term) {
term = term.trim();
if (term != "") highlight($this.prop("id"), term);
});
}
else {
highlight($this.prop("id"), searchTerm);
}
}
}
答案 2 :(得分：1)
我会把你所有的高亮功能移到它自己的功能中：
function highlightText(searchTerm, removeHighlight, highlight){
// remove any old highlighted terms
$('body').removeHighlight(removeHighlight);
// disable highlighting if empty
if (searchTerm) {
var terms = searchTerm.split(/(\s)/);
$.each(terms, function (_, term) {
// highlight the new term
term = term.trim();
if (term != "") $('body').highlight(term, highlight);
});
}
}
然后您可以使用以下内容激活突出显示并绑定原始的两个事件：
$(document).ready(function() {
$('#field1').bind('keyup change', function (ev) {
highlightText($(this).val(), 'span.highlight1', 'highlight1');
});
var field2 = $('#field2');
field2.bind('keyup change', function (ev) {
highlightText($(this).val(), 'span.highlight2', 'highlight2');
});
highlightText(field2.val(), 'span.highlight2', 'highlight2');
});