自动提供Javascript / PHP / AJAX代码

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.

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
  1. / => Starting delimter
  2. ^ => Start of string
  3. ( => Start a capture group
  4. [ => Start a character class
  5. $input => Add the input word to the character class
  6. ] => End the character class (4)
  7. {$length} => Set length of string to match character class against (length of input word)
  8. .* => Match any following characters 0 or more times
  9. ) => End capture group (3)
  10. $ => Match end of string
  11. / => Ending delimeter
  12. 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

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;