Autosuggestion Javascript/PHP/AJAX Code

Question

Consider an array holding some values

array = {'microsoft','micromax', 'miniclip','michael jackson','million','milky way'}

When an user start typing the text, say s/he is trying to enter million. When user start typing 'mi' the above suggestion in the array will be shown to the user.

My Question:

Let us assume user is typing the word 'mini clip', by typo s/he started to type 'mni' or 'minc' or 'nim' or 'imn' or 'nim' instead of 'min', this scenario also need to show the suggestion to the user. Becasue, anyway those typed characters are available in the word 'miniclip'. Typo is common for all entry level users/common users. So I need code in javascript/php/ajax/opensource library to suit this scenario.

Are you looking for an algo or is an out of the box solution also ok? If so, give solr a try wiki.apache.org/solr/Suggester — Dirk Lachowski
– Dirk Lachowski, Commented Oct 25, 2013 at 10:05
But when an user started to type 'mni' or 'minc' or 'nim' or 'imn' or 'nim' instead of 'min' due to typo, this scenario also need to show the suggestion 'miniclip' to the user, that is my question. — Vinayagam
– Vinayagam, Commented Oct 25, 2013 at 10:15

Steven · Accepted Answer · 2013-10-25 13:11:21Z

4

HTML

<form action=""><input type="text" name="word" id="word"></form>
<div id="auto"></div>

JS

$(function(){
    $('#word').keyup(function(e){
        var input = $(this).val();
        $.ajax({
            type: "get",
            url: "autocomplete.php",
            data: {word: input},
            async: true,
            success: function(data){
                var outWords = $.parseJSON(data);
                $('#auto').html('');

                for(x = 0; x < outWords.length; x++){
                    $('#auto').prepend('<div>'+outWords[x]+'</div>'); //Fills the #auto div with the options
                }
            }
        })
    })
});

Don't forget to link jQuery...

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

N.B.

You would need to do something like add an onclick event to the child divs of #auto to replace the contents of #word (the input field).

PHP

$array  = array('microsoft','micromax', 'miniclip','michael jackson','million','milky way');
$input  = urldecode($_GET['word']); //Get input word/phrase (decode in case of spaces etc.)
$length = strlen($input);           //Get length of input word
// $min    = $length - 1;              //Length of word - 1
// $max    = $length + 1;              //Length of word + 1

$returned = preg_grep('/^(['.$input.']{'.$length.'}.*)$/i', $array); //Find matches in $array and return as array
$returned = array_values($returned);                                //Re-index from 0

echo json_encode($returned); //Returm json string to ajax call

Regex

/^([$input]{$length}.*)$/i

/ => Starting delimter
^ => Start of string
( => Start a capture group
[ => Start a character class
$input => Add the input word to the character class
] => End the character class (4)
{$length} => Set length of string to match character class against (length of input word)
.* => Match any following characters 0 or more times
) => End capture group (3)
$ => Match end of string
/ => Ending delimeter
i => Modifier for case insensitivity

Min/Max

I have included the commented $min and $max variables... An added feature that I thought you might like... You would implement them by changing:

{'.$length.'}          <-- Change this
{'.$min.','.$max.'}    <--To that
{'.$length.','.$max.'} <-- Or that (or another combination)

Example

An example might best show how this works...

Suppose an auto correct array of:

$array = array('loser', 'loses', 'losing');

and an input of:

lose

Currently ({'.$length.'}) the code will return:

loser
loses

But if you change it to {'.$min.','.$max.'} (and uncomment $min / $max); it will return:

losing
loser
loses

edited Oct 25, 2013 at 13:11

answered Oct 25, 2013 at 12:58

Steven

6,1582 gold badges19 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Steven Over a year ago

I should also point out that this is a crude method; while fine for small word lists it will output large numbers of suggestions (with no filtering) for longer lists and when more (different) characters are in the input field.

Vinayagam Over a year ago

First of all Thanks Steven,I uncommented the <br> $min = $length - 1; //Length of word - 1 $max = $length + 1; //Length of word + 1 I am getting the following 3 issues. I. When I type "milyk w" it shows the suggestion "milky way", it is very nice but when I tried to type "milyk wy", it is not showing the suggestion. II. When am erasing all characters using backspace, the firebug throws a, Syntax Error: JSON.parse: unexpected character <br> III. I have tried with following typos

Vinayagam Over a year ago

1. mcroisoft - Ok 2. micro soft - Not Ok 3. micro sfot - Not Ok 4. microsotf - Ok 5. mirco sfto - Not Ok 6. icro soft - Not Ok 7. mivro soft (mercy) - Not Ok 8. microsogt (mercy) - Not Ok

Vinayagam Over a year ago

Comments for Not Ok: 2. micro soft - tried with space 3. micro sfot - But 's','f','o','t' avilable in 'microsoft' 5. mirco sfto - But 's','f','t','o' avilable in 'microsoft' 6. icro soft - Missed first letter 'M', but remaining character are available in 'microsoft' 7. mixro soft (mercy) - One wrong letter 'v' instead of 'c', because x is present previous to c 8. microsogt (mercy) - One wrong letter 'g' instead of 'f', because g is present next to f

Steven Over a year ago

Okay the JSON.parse error is an easy fix.. Add if(empty($_GET['word'])){exit;} to the start of the script. The error occurs because a couple of functions return errors when the input is empty.

|

Shailesh Sonare · Accepted Answer · 2016-05-05 12:46:40Z

Try this one

Here is index.php

<html>
    <body>
        <input type="text" name="testid" id="testid" >
        <div id="result">

        </div>
    </body>
    <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
    $(document).ready(function(){
        var xhr = null;

        $('#testid').on("keyup", function(){
            if(xhr !== null) { 
                xhr.abort();
            }
            var searchkey = $(this).val();

           xhr = $.ajax({
            method: "POST",
            url: "ajax_request.php",
            data: { searchkey: searchkey }
          })
            .done(function( msg ) {
                $('#result').html(msg);
            });
        });

        $(document.body).on('click', ".listitem", function(e){
            var values = $(this).html();
            $('#testid').val(values);
            $('#result').html('');
            return false;
        });

    });
</script>
</html>

And this one is your ajax_request.php

<?php
$arr = array("Shailesh Sonare", "Hello World", "Hello Universe");

$html = "<ul>";

foreach ($arr as $key => $value) {
    $html .= "<li class='listitem'>" . $value . "</li>";
}

$html .= "</ul>";

echo $html;

Collectives™ on Stack Overflow

Autosuggestion Javascript/PHP/AJAX Code

2 Answers 2

HTML

JS

N.B.

PHP

Regex

Min/Max

Example

12 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

HTML

JS

N.B.

PHP

Regex

Min/Max

Example

12 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related