如何使用 JQuery 创建输入建议

How to create input suggestions with JQuery

本文关键字：输入 创建 何使用 JQuery      更新时间：2023-09-26

我正在努力创建一个从字符串列表中自动建议的输入字段。我一直在尝试几个不同的教程，最后从官方文档中查看了一个非常简单的示例，但由于某种原因，我无法获得任何工作。

输入框的 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 文件，在这里放置了完整的 javascript 文件，以防这些示例还不够。这里和那里有一些注释掉的行，因为我从我一直遵循的教程中更改了一些内容。

我的想法是，我希望人们开始输入他们大学的名称，然后从中弹出一个建议列表供您选择。无论出于何种原因，我似乎都无法让 jquery UI 插件显示任何建议。任何建议将不胜感激！

在您的 html 页面中，您只有 jquery-ui 和引导库，所以我猜您正在使用 jquery-ui 自动完成功能，在这种情况下您那里没有lookup选项......您需要将该选项作为源传递

所以

$("#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 -->

相关文章：