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.

Popover Suggest Demo

Display a selection list in a Bootstrap Popover.

Make a selection