所以我不确定为什么我无法在焦点事件中访问$（this）.attr（id）。我在变量中设置它但在我尝试查看存储的值时未定义。不完全确定这里出了什么问题。我正在使用名为“Horsey”的库，使您可以轻松地将自动完成功能集成到您的应用程序中。请参阅此处的文档：https://github.com/bevacqua/horsey/
以下是相关代码：
$( "input" ).focus(function() {
var curr_input_id = $(this).attr('id');
alert($(this).attr('id'));
horsey(document.querySelector(curr_input_id), {
suggestions: [<? echo $this->Video_model->get_all_tag_names(); ?>]
});
});
这是完整的html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Dashboard - Snipptr | Uploaded Videos</title><!-- Bootstrap -->
<link href="<?php echo base_url().'assets/css/bootstrap.min.css'; ?>" rel="stylesheet" type="text/css">
<link href="<?php echo base_url().'assets/css/bootstrap.fd.css'; ?>" rel="stylesheet" type="text/css">
<link href="<?php echo base_url().'assets/css/dropzone.min.css'; ?>" rel="stylesheet" type="text/css">
<link href="<?php echo base_url().'assets/css/bootstrap-tagsinput.css'; ?>" rel="stylesheet" type="text/css">
<link href="<?php echo base_url().'assets/css/horsey.min.css'; ?>" rel="stylesheet" type="text/css">
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet">
<link href="//vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<link href="<?php echo base_url().'assets/css/custom.css'; ?>" rel="stylesheet" type="text/css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="<?php echo base_url().'assets/img/logo.png'; ?>" alt="" /></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="<?php echo base_url().'subscriber'; ?>">Basic Stats<span class="sr-only">(current)</span></a></li>
<li class="active"><a href="<?php echo base_url().'subscriber/videos'; ?>">Uploaded Videos</a></li>
<!-- <li><a href="<?php //echo base_url().'subscriber/suggested'; ?>">Suggested Snippets</a></li> -->
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="<?php echo base_url().'subscriber/pending_snippets'; ?>">0 New Snippets</a></li>
<li class="open_button"><button data-toggle="modal" data-target="#squarespaceModal" class="btn btn-primary center-block">Upload Video(s)</button></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Account (50/50 credits - $250) <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Add Credits</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Billing</a></li>
<li role="separator" class="divider"></li>
<li><a href="<?php echo base_url().'auth/logout'; ?>">Logout</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Page Content -->
<div class="container">
<!-- Page Header -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Your Uploaded Videos (<? echo $video_number; ?>)
<small>Snippets Pending: 0 - Snippets Approved: 0</small>
</h1>
</div>
</div>
<!-- /.row -->
<!-- Projects Row -->
<div class="row">
<?php
foreach ($videos as $video)
{ ?>
<div class="col-md-4 portfolio-item">
<video id="really-cool-video" class="video-js vjs-default-skin" controls
preload="auto" width="358" height="264" poster="really-cool-video-poster.jpg"
data-setup='{}'>
<source src="<?php echo s3_site_url("subscriber_videos/".$video->s3_file_name); ?>" type='<? echo $this->Video_model->format_mime_type($video->mime_type); ?>'>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser
that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
<h3>
<a href="<?php echo s3_site_url("subscriber_videos/".$video->s3_file_name); ?>"><? echo $video->file_name; ?></a>
</h3>
<p>Write a general (140 word) description of this video here. Make this a text area.</p>
<p><input class='tags_input_area' id='tags_<? echo $video->id; ?>' type="text" value="<? echo $this->Video_model->get_tag_names($video->tags); ?>" data-role="tagsinput" placeholder="Enter your tags here."></p>
<? if ($video->active == 0)
{
$checked = '';
}
else
{
$checked = 'checked';
}
?>
<input <? echo $checked; ?> data-toggle="toggle" data-on="Active" data-off="Inactive" data-onstyle="success" data-offstyle="danger" type="checkbox" id="active_switch_<? echo $video->id; ?>" class="active_switches">
<? /*if ($checked == 'checked') {
echo ' Finding Snippeters...';
}*/
?>
<hr>
<a href="<?php echo base_url().'subscriber/pending_snippets/'.$video->id; ?>">(New) Pending Snippets (<? echo $this->Video_model->get_submitted_snippets($video->id, 1); ?>)</a> - <a href="<?php echo base_url().'subscriber/approved_snippets/'.$video->id; ?>">Accepted Snippets (<? echo $this->Video_model->get_accepted_snippets($video->id, 1); ?>)</a>
<hr>
</div>
<?php
}
?>
</div>
<!-- /.row -->
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Your Website 2014</p>
</div>
</div>
<!-- /.row -->
</footer>
</div>
<!-- /.container -->
<!-- line modal -->
<div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h3 class="modal-title" id="lineModalLabel">Upload Video(s)</h3>
</div>
<div class="modal-body">
<!-- content goes here -->
<form id="my-awesome-dropzone" action="<?php echo base_url().'subscriber/upload_video'; ?>" class="dropzone bfd-dropfield-inner"></form>
</div>
<div class="modal-footer">
<div class="btn-group btn-group-justified" role="group" aria-label="group button">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" data-dismiss="modal" role="button">Close</button>
</div>
<div class="btn-group btn-delete hidden" role="group">
<button type="button" id="delImage" class="btn btn-default btn-hover-red" data-dismiss="modal" role="button">Delete</button>
</div>
<!--
<div class="btn-group" role="group">
<button type="button" id="saveImage" class="btn btn-default btn-hover-green" data-action="save" role="button">Save</button>
</div>
-->
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript">
</script><!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="<?php echo base_url().'assets/js/bootstrap.min.js'; ?>" type="text/javascript">
</script>
<script src="<?php echo base_url().'assets/js/dropzone.min.js'; ?>" type="text/javascript">
</script>
<script src="<?php echo base_url().'assets/js/bootstrap-tagsinput.min.js'; ?>" type="text/javascript">
</script>
<script src="<?php echo base_url().'assets/js/horsey.min.js'; ?>" type="text/javascript">
</script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>
<script src="//vjs.zencdn.net/4.12/video.js"></script>
<script>
$( document ).ready(function() {
$('input[type="checkbox"]').change(function () {
var id = $(this).attr('id');
video_id = id.replace('active_switch_','');
var check = $(this).prop('checked');
if (check)
{
t = 1;
}
else {
t = 0;
}
$.get( "active_switch/" + video_id + "/" + t, function( data ) {
console.log( data + "." );
});
});
u = '<? echo base_url(); ?>' + 'subscriber/';
$('input').on('itemAdded', function(event) {
tag_name = event.item;
vid_id = $(this).attr('id');
real_vid_id = vid_id.replace('tags_','');
$.post( u + "add_tag", { tag_name: tag_name, video_id: real_vid_id })
.done(function( data ) {
//alert( data );
});
});
$('input').on('itemRemoved', function(event) {
tag_name = event.item;
//alert(tag_name);
vid_id = $(this).attr('id');
real_vid_id = vid_id.replace('tags_','');
$.post( u + "delete_tag", { tag_name: tag_name, video_id: real_vid_id })
.done(function( data ) {
//alert( data );
});
});
/*
$('input .tags_input_area').tagsinput({
typeaheadjs: {
source: function(query) {
return $.get(u + 'get_all_tags');
}
}
});
*/
$( "input" ).focus(function() {
horsey(document.querySelector('input'), {
suggestions: [<? echo $this->Video_model->get_all_tag_names(); ?>]
});
});
$(".portfolio-item h3 a").text(function(index, currentText) {
if (currentText.length >= 27)
{
return currentText.substr(0, 27) + '...';
}
});
});
</script>
</body>
</html>