此代码使用jQuery“实时”过滤li列表：
<input id="filter_list" type="text" placeholder="Filter Playlist Tracks" />
在页面的其他地方，我有一个简单的php / mySql查询调用的图像列表：
while($row = $result->fetch_assoc()) {
$img_url = $row['img_url'];
$img_name = $row['img_name'];
echo '<img src="'.$img_url.'"title="'.$img_name.'" onmouseoverHERE? />';
}
我需要在图像标记中使用JS鼠标悬停，这样当鼠标悬停在图像上时，图像NAME会动态放置在INPUT filter_list文本输入元素中。
如果可能的话，我需要输入要聚焦的字段，以便使用我现有的jQuery过滤列表。 （注意：如果我在输入字段中手动输入文本，目前它可以正常工作）
所以我不希望它只是简单地输入文本输入 - 它应该“填充”和“过滤”
作为一个注释，我不在乎我们是否需要onClick或onMouseOver
谢谢 - d
实际代码
<!-- ***** SEARCH / FILTER INPUT ***** -->
<div style="border:0px solid #f00;margin:0px 0px 20px 0px;width:100%;padding:5px;">
<input type="text"
id='filter_playlist'
placeholder="Filter Playlist Tracks" />
</div>
echo '<table style="border:0px solid #f00">';
while($row = $result->fetch_assoc()) {
$album = $row['album'];
$album_pict = $row['source_poster'];
$count_row ++;
if($count_row == 1){
echo '<tr>';
}
echo '<td style="border:0px solid #f00;width:25%;padding:5px">
<img src="'.$album_pict.'" class="img-responsive"
data-toggle="tooltip"
data-container="body"
data-placement="bottom"
title="'.$album.'"
onmouseover="$(\'#filter_playlist\').value=\''.$album.'\';$(\'#filter_playlist\').focus();" />
</td>';
if($count_row == 4){
echo '</tr>';
$count_row = 0;
}
}
echo '</table>';
这是JQ COD ETHAT处理过滤
<!-- ----------------------------------- -->
<!-- ***** JS - FILTER PLAYLIST -->
<!-- ----------------------------------- -->
<script type='text/javascript'>
$(document).ready(function () {
(function ($) {
$('#filter_playlist').keyup(function () {
var rex = new RegExp($(this).val(), 'i');
$('.searchable li').hide();
$('.searchable li').filter(function () {
return rex.test($(this).text());
}).show();
})
}(jQuery));
});
</script>
好的，我已经使用静态代码将这个简单的图像分解为三个简单的图像：任何人都可以提供帮助：
<html>
<head>
<!-- *JS* JQUERY ***** -->
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<!-- ***** SEARCH / FILTER INPUT ***** -->
<div style="border:1px solid #f00;width:33%;padding:5px">
<ul>
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
<li> Item 4</li>
<li> Item 5</li>
<li> Item 6</li>
</div>
<div style="border:1px solid #f00;width:33%;padding:5px;">
<input type="text"
id="filter_playlist"
style="font-size:48px;
width:100%"
placeholder="Filter Tracks"
onkeyup="doFilterPlaylist()" />
</div>
<div style="border:1px solid #f00;width:33%;padding:5px;float:left">
<img src="http://www.underconsideration.com/brandnew/archives/google_2015_logo_detail.png" style="width:100px" title="Item 1"
onclick="document.getElementById('filter_playlist').value='Item 1';document.getElementById('filter_playlist').focus();doFilterPlaylist();" />
<br />
<img src="http://www.underconsideration.com/brandnew/archives/google_2015_logo_detail.png" style="width:100px" title="Item 2"
onclick="document.getElementById('filter_playlist').value='Item 2';document.getElementById('filter_playlist').focus();doFilterPlaylist();" />
<br />
<img src="http://www.underconsideration.com/brandnew/archives/google_2015_logo_detail.png" style="width:100px" title="Item 3"
onclick="document.getElementById('filter_playlist').value='Item 3';document.getElementById('filter_playlist').focus();doFilterPlaylist();" />
</div>
<!-- ***** JS - FILTER PLAYLIST -->
<script type='text/javascript'>
function doFilterPlaylist() {
var ele = $('#filter_playlist');
var rex = new RegExp(ele.val(), 'i');
$('.searchable li').hide();
$('.searchable li').filter(function () {
return rex.test(ele.text());
}).show();
}
</script>
</body>
</html>
当用户点击第一个徽标时，名称应该放在文本输入框中（这样可以），但它也应该将顶部的列表过滤到仅匹配（或包含字符）的项目。 / p>
希望这会使它变得更简单，远离所有动态代码。它必须转移到动态代码，所以简单的“隐形”或“隐藏”将不起作用....提前谢谢你。
答案 0 :(得分：0)
您需要处理鼠标悬停事件，以便当用户将鼠标悬停在图像上时，将调用Javascript。由于聚焦元素并改变其值所涉及的代码不多，因此可以内联执行此操作。
<img src="something.png" onmouseover="$('#filter_playlist').value='name';$('#filter_playlist').focus();">
<input type="text"
id='filter_playlist'
placeholder="Filter Playlist Tracks" />
onmouseover在鼠标悬停事件发生时调用Javascript; $('#filter_playlist')使用JQuery选择标识为filter_playlist的元素; filter_playlist的值设置为name会将文本name输入到输入框中focus()上调用filter_playlist功能将其重点关注，以便用户轻松编辑。作为可用性说明，我会使用onclick而不是onmouseover。这是因为用户可能正在移动鼠标尝试更改标签/应用程序等，而不一定是尝试与您的网站进行交互。要进行此更改，您只需将onmouseover替换为onclick - 就这么简单！
我已经在您的网站上对此进行了测试，正常运行。将doFilterPlaylist()函数替换为：
function doFilterPlaylist() {
var val = document.getElementById("filter_playlist").value.toLowerCase();
var elements = $("#playlist li");
for (i=0;i<elements.length;i++) {
var txt = elements[i].innerText.toLowerCase();
if (txt.slice(0,1)==" ") {
txt = txt.slice(1);
};
if (txt.indexOf(val)===0) {
elements[i].style.display = "block";
}
else {
elements[i].style.display = "none";
};
};
};
答案 1 :(得分：0)
为图像提供共享课程。
echo '<img src="'.$img_url.'"title="'.$img_name.'" class="playlistFilterImage" />';
然后尝试以下内容。
jQuery(function($){
var $filterList = $('#filterList');
$('.playlistFilterImage').on('mouseenter', function(e){
$filterList.val(e.target.title);
});
});<input id="filterList" type="text" placeholder="Filter Playlist Tracks" />