Jman117 Jman117 - 1 year ago 45
HTML Question

How to create input suggestions with JQuery

I'm struggling to create an input field that auto-suggests from a list of strings. I've been trying a few different tutorials and finally looked at a pretty simple example from the official documentation, but for some reason I just can't get anything to work.

HTML for the input box

<div id="searchfield">
<input type="text" id="CollegeNameInput"
class="form-control biginput"
placeholder="Search for your University"
onkeydown="submitCollegeNameForm(event)">
</div>


JavaScript for autocomplete

$("#CollegeNameInput").autocomplete({
lookup: collegeList,
onSelect: function (suggestion) {
alert('you selected '+suggestion.value+' which has data'+suggestion.data);
}
});


I've placed the full html file here and the full javascript file here in case these samples aren't enough. There's a few commented out lines here and there as I've changed a few things around from a tutorial I'd been following.

The idea is that I'd like people to start typing the name of their university and a list of suggestions will pop up from them to select from. For whatever reason I can't seem to get the jquery UI plugin to make any suggestions show up at all. Any suggestions would be greatly appreciated!

Answer Source

In your html page you have only jquery-ui and bootstrap libraries so I'm guessing you are using jquery-ui autocomplete in that case you don't have a lookup option there... you need to pass the option as a source

So

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

Also looks like you have forgot to include the jQuery UI css file, include that too

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/redmond/jquery-ui.css">

Demo

/**
 * 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 -->