Question

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

输入框的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和完整的javascript文件here，以防这些示例不够用。这里和那里有一些注释掉的线条，因为我已经从我一直关注的教程中改变了一些内容。

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

Answer 1

在你的html页面中，你只有jquery-ui和bootstrap库，所以我猜你正在使用jquery-ui autocomplete，因为那里你没有lookup选项...你需要将选项作为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 -->

如何使用JQuery创建输入建议

1 个答案: