Popover Suggest Demo
Display a selection list in a Bootstrap Popover.
Make a selection
How to Use
Popover Suggest require Jquery and bootstrap 3 or 4
HTML
<input type="text" id="input-suggest" placeholder="Type two characters ..." autocomplete="off" data-toggle="popover" data-content="error">
Javascript
$('#input-suggest').popsuggest({ placement : 'bottom', dataUrl: 'data.php', rows: 10, addData: { '_token': 'my_token', } }).on( "popSelect", function() { alert("Your choice : "+this.value); });
Options
placement
Same as bootstrap popover placement : How to position the popover - auto | top | bottom | left | right. Default is right.
dataUrl
Path to your file with data got by ajax request, method is post. Data format is a string with each item separated by a separator. Required.
chainLength
Number of characters from which the ajax request is launched. Default is 2.
rows
Number of rows in each column. Default is 8.
separator
String separator. Default is coma.
html
Boolean, allow or not html in results. Default is false.
addData
Object with additional parameters sent to server. Default is empty.
Events
popSelect
Fired on click or enter in result item.
PHP example
This demo works with the world database you can find here.
This is the data.php file :
//include your PDO instance as $bdd $needle = $_POST['chain']; $response = $bdd->query('SELECT Name FROM city WHERE Name REGEXP \'^'.$needle.'\''); if($response->rowCount() > 0){ while ($data = $response->fetch()) { echo $data['Name'].","; } }else echo 'No result'; $response->closeCursor();
License
Popover Suggest v1.0.0
Copyright (C) 2018 Sylvestre Lambey
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
www.gnu.org/licenses/gpl.html.