Jman117 Jman117 - 7 months ago 13
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

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

Comments