自动提示Javascript / PHP / AJAX代码

考虑一个包含一些值的数组

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

当用户开始输入文本时,说他/他正在尝试输入百万.当用户开始键入“ mi”时,将向用户显示数组中的上述建议.

我的问题：

让我们假设用户输入的是“ mini clip”一词,他/她开始输入“ mni”或“ minc”或“ nim”或“ imn”或“ nim”而不是“ min”,这种情况下还需要向用户显示建议.因为,无论如何,这些键入的字符都在单词“ miniclip”中可用.错字对于所有入门级用户/普通用户都是通用的.所以我需要javascript / php / ajax / opensource库中的代码来适应这种情况.

解决方法:

的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
                }
            }
        })
    })
});

别忘了链接jQuery …

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

N.B.

您将需要执行一些操作,例如向#auto的子div中添加onclick事件以替换#word的内容(输入字段).

的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

正则表达式

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

> / =>开始除臭
> ^ =>字符串开始
>(=>启动捕获组
> [=>开始角色课程
> $input =>将输入的单词添加到字符类中
>] =>结束角色类(4)
> {$length} =>设置字符串长度以匹配字符类(输入单词的长度)
>.* =>匹配以下任何字符0次或更多次
>)=>结束捕获组(3)
> $=>匹配字符串结尾
> / =>结束距离
> i =>不区分大小写的修饰符

最小/最大

我已经包括了注释过的$min和$max变量…我认为您可能想要的一个附加功能…您可以通过以下方式实现它们：

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

例

一个例子可能最好地展示了它是如何工作的…

假设自动校正数组为：

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

和输入：

lose

当前({‘.$length.’})代码将返回：

loser
loses

但是,如果将其更改为{‘.$min.’,’.$max.’}(并取消注释$min / $max)；它会返回：

losing
loser
loses

标签：autosuggest,autocomplete,javascript,php,jquery
来源： https://codeday.me/bug/20191030/1966617.html