InputHint • Programmer

InputHint – JQUERY/PHP plugin that adds hints with variants of the entered text to input fields, with the possibility of their selection by the user, and filling the field with text from the selected hint.

Buy on Gumroad

Current version

1.0.0.

Tested in browser

Google Chrome 88, Firefox 85, Opera 74

Video demonstration

Requirements

PHP must be available on your site
JQUERY must be linked to your page

How to add the plugin to the HTML page

In order to connect the plugin, you need:

Changes on your HTML page – add/modify the following code:

Link .css file with styles. Add the following to the “<head>” block:

<head>
    <link
        href="inputhint/inputhint.css"
        type="text/css" rel="stylesheet"
    >
</head>

<head>

<link

href="inputhint/inputhint.css"

type="text/css" rel="stylesheet"

</head>

For the input field, for which you want to connect hints, specify the “inputhint” class and set the “hint_query” and “limit” parameters. In the “hint_query” parameter specify the path to the “query.php” file.

<input type="text"
    class="inputhint"
    hint_query="query.php"
    limit="5"
>

<input type="text"

class="inputhint"

hint_query="query.php"

limit="5"

Add js-script with the plugin:

<script type="text/javascript"
    src="inputhint/inputhint.js"
></script>

src="inputhint/inputhint.js"

></script>

This is the JQUERY plugin, check that JQUERY is connected to your page:

<script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"
></script>

src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"

></script>

Edit the “query.php” file to return a dataset with hints based on the text the user enters into the input field.

PHP must be available on your site.

In the “query.php” file you can write an SQL query to your database or any other code that will return the data you need for hints.

Requirements for the returned data: it must be a two-dimensional associative array with “key” – “value” pairs.

The simplest example of the returning data:

$query_rez = [
    ['a' => 'Text_A'],
    ['b' => 'Text_B'],
    ['c' => 'Text_C'],
    ['d' => 'Text_D']
];

$query_rez = [

['a' => 'Text_A'],

['b' => 'Text_B'],

['c' => 'Text_C'],

['d' => 'Text_D']

];

The value in the first element in each row of the array will be shown to the user in the hints, and this value will fill the input field if the user clicks on it in the hints.

Modify the “inputhint.css” file

This file is responsible for how the hints look like. Edit it to match the styles of your HTML page.

That’s all

Now, every time the user types text in the “input” field (starting with 3 characters), the “query.php” file is executed and the result returned by it is shown to the user as hints below the field.

If the user clicks on any of them, the “input” field is filled with the text of the selected hint.

In addition, when the user selects the hint, a javascript event “inputhint_item_selected” is generated, which can be handled by you for some other tasks, for example, filling the other fields.