Databases
StackOverflow2013
Postsdbo
POForce selection with JQuery autocomplete
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POForce selection with JQuery autocomplete
    text
    copied!<p>I know this question has been asked before, but I wasn't able to find any answers that are up to date or functional (at least for my application).</p> <p>My JQuery autocomplete box is using a mysql database as its source. I want the user to be able to type to get recommendations, but then is forced to select from the dropdown choices before they can submit the form.</p> <p>My Javascript:</p> <pre><code> &lt;script type="text/javascript"&gt; $.widget( 'ui.autocomplete', $.ui.autocomplete, { _renderMenu: function( ul, items ) { var that = this; $.ui.autocomplete.currentItems = items; $.each( items, function( index, item ) { that._renderItemData( ul, item ); }); } }); $.ui.autocomplete.currentItems = []; $(function() { $("#college").autocomplete({ source: "search.php", minLength: 5 }); }); var inputs = {college: false}; $('#college').change(function(){ var id = this.id; inputs[id] = false; var length = $.ui.autocomplete.currentItems.length; for(var i=0; i&lt;length; i++){ if($(this).val() == $.ui.autocomplete.currentItems[i].value){ inputs[id] = true; } } }); $('#submit').click(function(){ for(input in inputs){ if(inputs.hasOwnProperty(input) &amp;&amp; inputs[input] == false){ alert('incorrect'); return false; } } alert('correct'); $('#college_select_form').submit(); }); &lt;/script&gt; </code></pre> <p>My form:</p> <pre><code>&lt;form action="choose.php" method="post" id="college_select_form" name="college_select_form"&gt; &lt;input type="text" id="college" name="college" class="entry_field" value="Type your school" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Type your school':this.value;" /&gt;&lt;input type="submit" id="submit" name="submit" class="submitButton" value="Go" title="Click to select school" /&gt; &lt;/form&gt; </code></pre> <p>Search.php:</p> <pre><code>&lt;?php try { $conn = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass); } catch(PDOException $e) { echo $e-&gt;getMessage(); } $return_arr = array(); if ($conn) { $ac_term = "%".$_GET['term']."%"; $query = "SELECT * FROM college_list where name like :term"; $result = $conn-&gt;prepare($query); $result-&gt;bindValue(":term",$ac_term); $result-&gt;execute(); /* Retrieve and store in array the results of the query.*/ while ($row = $result-&gt;fetch(PDO::FETCH_ASSOC)) { array_push($return_arr, array('label' =&gt; $row['name'], 'value' =&gt; $row['name'])); } } /* Free connection resources. */ //$conn = null; /* Toss back results as json encoded array. */ echo json_encode($return_arr); ?&gt; </code></pre> <p>So what would be the best approach to doing this? The only solution I can think of is using PHP to verify that the textbox's value matches a value in the database, but I'm not sure how to implement that with my current code.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload