如何使用 JQuery 创建输入建议
How to create input suggestions with JQuery
我正在努力创建一个从字符串列表中自动建议的输入字段。我一直在尝试一些不同的教程,并最终从官方文档中查看了一个非常简单的示例,但由于某种原因,我无法让任何东西工作。
HTML为输入框
<div id="searchfield">
<input type="text" id="CollegeNameInput"
class="form-control biginput"
placeholder="Search for your University"
onkeydown="submitCollegeNameForm(event)">
</div>
JavaScript 用于自动完成
$("#CollegeNameInput").autocomplete({
lookup: collegeList,
onSelect: function (suggestion) {
alert('you selected '+suggestion.value+' which has data'+suggestion.data);
}
});
我已经放置了完整的 html 文件 here and the full javascript file here 以防这些样本不够用。这里和那里有一些注释掉的行,因为我已经从我一直关注的教程中更改了一些内容。
我的想法是,我希望人们开始输入他们大学的名称,然后他们会弹出一个建议列表 select。无论出于何种原因,我似乎无法获得 jquery UI 插件来提出任何建议。任何建议将不胜感激!
在您的 html 页面中,您只有 jquery-ui 和 bootstrap 库,所以我猜您正在使用 jquery-ui autocomplete in that case you don't have a lookup
option there... you need to pass the option as a source
所以
$("#CollegeNameInput").autocomplete({
source: collegeList,
onSelect: function (suggestion) {
//var thehtml = '<strong>Currency Name:</strong> ' + suggestion.value + ' <br> <strong>Symbol:</strong> ' + suggestion.data;
//$('#outputcontent').html(thehtml);
alert('you selected ' + suggestion.value + ' which has data' + suggestion.data);
}
});
您似乎还忘记包含 jQuery UI css 文件,也包含它
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/redmond/jquery-ui.css">
演示
/**
* Created by Jake on 1/16/2015.
*/
window.onload = function() {
//$("CollegeNameInput").style = 'background-color: red;';
}
//setup college list
var collegeList = [{
value: 'Purdue University',
data: 'purdue'
}, {
value: 'Cal Poly Slo',
data: 'calpolyslo'
}, {
value: 'Sample College',
data: 'samplecollege'
}, ]
function submitCollegeNameForm(event) {
if (event.keyCode == 13 || event.which == 13) {
messageBox = getCollegeNameElement();
messageString = messageBox.value;
sessionStorage.setItem('uniName', messageString);
window.location.href = "classPage.html";
}
}
function getCollegeNameElement() {
var panel = document.getElementById("CollegeNameInput");
return panel;
}
//// setup autocomplete function pulling from currencies[] array
$("#CollegeNameInput").autocomplete({
source: collegeList,
onSelect: function(suggestion) {
//var thehtml = '<strong>Currency Name:</strong> ' + suggestion.value + ' <br> <strong>Symbol:</strong> ' + suggestion.data;
//$('#outputcontent').html(thehtml);
alert('you selected ' + suggestion.value + ' which has data' + suggestion.data);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--jQuery UI-->
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>
<!--Bootstrap-->
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">ClassChat</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a>
</li>
<li><a href="#about">About</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="jumbotron" style="margin-top: 100px">
<h1>Jump into ClassChat!</h1>
<div class="row">
<div class="col-md-3">
<p>Enter your University:</p>
</div>
<div class="col-md-5">
<div id="searchfield">
<input type="text" id="CollegeNameInput" class="form-control biginput" placeholder="Search for your University" onkeydown="submitCollegeNameForm(event)">
</div>
</div>
<div class="col-md-4"></div>
</div>
</div>
</div>
<!-- /.container -->
我正在努力创建一个从字符串列表中自动建议的输入字段。我一直在尝试一些不同的教程,并最终从官方文档中查看了一个非常简单的示例,但由于某种原因,我无法让任何东西工作。
HTML为输入框
<div id="searchfield">
<input type="text" id="CollegeNameInput"
class="form-control biginput"
placeholder="Search for your University"
onkeydown="submitCollegeNameForm(event)">
</div>
JavaScript 用于自动完成
$("#CollegeNameInput").autocomplete({
lookup: collegeList,
onSelect: function (suggestion) {
alert('you selected '+suggestion.value+' which has data'+suggestion.data);
}
});
我已经放置了完整的 html 文件 here and the full javascript file here 以防这些样本不够用。这里和那里有一些注释掉的行,因为我已经从我一直关注的教程中更改了一些内容。
我的想法是,我希望人们开始输入他们大学的名称,然后他们会弹出一个建议列表 select。无论出于何种原因,我似乎无法获得 jquery UI 插件来提出任何建议。任何建议将不胜感激!
在您的 html 页面中,您只有 jquery-ui 和 bootstrap 库,所以我猜您正在使用 jquery-ui autocomplete in that case you don't have a lookup
option there... you need to pass the option as a source
所以
$("#CollegeNameInput").autocomplete({
source: collegeList,
onSelect: function (suggestion) {
//var thehtml = '<strong>Currency Name:</strong> ' + suggestion.value + ' <br> <strong>Symbol:</strong> ' + suggestion.data;
//$('#outputcontent').html(thehtml);
alert('you selected ' + suggestion.value + ' which has data' + suggestion.data);
}
});
您似乎还忘记包含 jQuery UI css 文件,也包含它
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/redmond/jquery-ui.css">
演示
/**
* Created by Jake on 1/16/2015.
*/
window.onload = function() {
//$("CollegeNameInput").style = 'background-color: red;';
}
//setup college list
var collegeList = [{
value: 'Purdue University',
data: 'purdue'
}, {
value: 'Cal Poly Slo',
data: 'calpolyslo'
}, {
value: 'Sample College',
data: 'samplecollege'
}, ]
function submitCollegeNameForm(event) {
if (event.keyCode == 13 || event.which == 13) {
messageBox = getCollegeNameElement();
messageString = messageBox.value;
sessionStorage.setItem('uniName', messageString);
window.location.href = "classPage.html";
}
}
function getCollegeNameElement() {
var panel = document.getElementById("CollegeNameInput");
return panel;
}
//// setup autocomplete function pulling from currencies[] array
$("#CollegeNameInput").autocomplete({
source: collegeList,
onSelect: function(suggestion) {
//var thehtml = '<strong>Currency Name:</strong> ' + suggestion.value + ' <br> <strong>Symbol:</strong> ' + suggestion.data;
//$('#outputcontent').html(thehtml);
alert('you selected ' + suggestion.value + ' which has data' + suggestion.data);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--jQuery UI-->
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>
<!--Bootstrap-->
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">ClassChat</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a>
</li>
<li><a href="#about">About</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="jumbotron" style="margin-top: 100px">
<h1>Jump into ClassChat!</h1>
<div class="row">
<div class="col-md-3">
<p>Enter your University:</p>
</div>
<div class="col-md-5">
<div id="searchfield">
<input type="text" id="CollegeNameInput" class="form-control biginput" placeholder="Search for your University" onkeydown="submitCollegeNameForm(event)">
</div>
</div>
<div class="col-md-4"></div>
</div>
</div>
</div>
<!-- /.container -->