I am new to jquery and javascript. I am trying to develope a text box which will have autocomplete feature displaying data from database.
After looking into several solutions over internet and tried them with no success I came over here.
I have created a HTML file autocomplete_demo.html as below,
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>autocomplete demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.autocomplete.html.js"></script>
<link rel="stylesheet" type="text/css" href="css/autocomplete.css">
<script type="text/javascript" src="js/autocomplete.js"></script>
</head>
<body>
<input type="text" id="topic_title">
</body>
</html>
Then I have created a autocomplete.css as below,
/* highlight results */
.ui-autocomplete span.hl_results {
background-color: #ffff66;
}
/* loading - the AJAX indicator */
.ui-autocomplete-loading {
background: white url('../img/ui-anim_basic_16x16.gif') right center no-repeat;
}
/* scroll results */
.ui-autocomplete {
max-height: 250px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
/* add padding for vertical scrollbar */
padding-right: 5px;
}
.ui-autocomplete li {
font-size: 16px;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
height: 250px;
}
Then I have created a autocomplete.js as below,
/* highlight results */
.ui-autocomplete span.hl_results {
background-color: #ffff66;
}
/* loading - the AJAX indicator */
.ui-autocomplete-loading {
background: white url('../img/ui-anim_basic_16x16.gif') right center no-repeat;
}
/* scroll results */
.ui-autocomplete {
max-height: 250px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
/* add padding for vertical scrollbar */
padding-right: 5px;
}
.ui-autocomplete li {
font-size: 16px;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
height: 250px;
}
And this is my autocomplete.php as below,
<?php
// prevent direct access
$isAjax = isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND
strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest';
if(!$isAjax) {
$user_error = 'Access denied - not an AJAX request...';
trigger_error($user_error, E_USER_ERROR);
}
// get what user typed in autocomplete input
$term = trim($_GET['term']);
$a_json = array();
$a_json_row = array();
$a_json_invalid = array(array("id" => "#", "value" => $term, "label" => "Only letters and digits are permitted..."));
$json_invalid = json_encode($a_json_invalid);
// replace multiple spaces with one
$term = preg_replace('/\s+/', ' ', $term);
// SECURITY HOLE ***************************************************************
// allow space, any unicode letter and digit, underscore and dash
if(preg_match("/[^\040\pL\pN_-]/u", $term)) {
print $json_invalid;
exit;
}
// *****************************************************************************
// database connection
include 'connect.php';
$parts = explode(' ', $term);
$p = count($parts);
/**
* Create SQL
*/
$sql = "SELECT * FROM `reviewsystem`.`review_topic` where `topic` LIKE '%$term%'";
for($i = 0; $i < $p; $i++) {
$sql .= ' AND post_title LIKE ' . "'%" . $conn->real_escape_string($parts[$i]) . "%'";
}
$rs = $conn->query($sql);
if($rs === false) {
$user_error = 'Wrong SQL: ' . $sql . 'Error: ' . $conn->errno . ' ' . $conn->error;
trigger_error($user_error, E_USER_ERROR);
}
while($row = $rs->fetch_assoc()) {
$a_json_row["reviewtitle"] = $row["topic"];
array_push($a_json, $a_json_row);
}
// highlight search results
$a_json = apply_highlight($a_json, $parts);
$json = json_encode($a_json);
print $json;
?>
I also have build a jquery.ui.autocomplete.html.js as below,
/*
* jQuery UI Autocomplete HTML Extension
*
* Dual licensed under the MIT or GPL Version 2 licenses.
*
*/
(function( $ ) {
var proto = $.ui.autocomplete.prototype,
initSource = proto._initSource;
function filter( array, term ) {
var matcher = new RegExp( $.ui.autocomplete.escapeRegex(term), "i" );
return $.grep( array, function(value) {
return matcher.test( $( "<div>" ).html( value.label || value.value || value ).text() );
});
}
$.extend( proto, {
_initSource: function() {
if ( this.options.html && $.isArray(this.options.source) ) {
this.source = function( request, response ) {
response( filter( this.options.source, request.term ) );
};
} else {
initSource.call( this );
}
},
_renderItem: function( ul, item) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( $( "<a></a>" )[ this.options.html ? "html" : "text" ]( item.label ) )
.appendTo( ul );
}
});
})( jQuery );
I am not sure what I am missing.