Autosuggestion Javascript/PHP/AJAX Code

Autosuggestion Javascript/PHP/AJAX Code

本文关键字：Code AJAX PHP Autosuggestion Javascript      更新时间：2023-09-26

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

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

当用户开始键入文本时，说他/她正在尝试输入million。当用户开始键入'mi'数组中的上述建议将显示给用户。

我的问题：

让我们假设用户正在输入单词"迷你剪辑"，通过拼写错误他/她开始键入'mni' or 'minc' or 'nim' or 'imn' or 'nim' instead of 'min',这种情况还需要向用户显示建议。无论如何，这些键入的字符都可以在"迷你剪辑"一词中找到。拼写错误对于所有入门级用户/普通用户都很常见。所以我需要javascript/php/ajax/opensource library中的代码来适应这种情况。

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>
注

：注：

您需要执行一些操作，例如将onclick事件添加到#auto的子div以替换#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
  1. / => 开始犯罪
  2. ^ => 字符串开头
  3. ( => 启动捕获组
  4. [ => 开始角色类
  5. $input => 将输入词添加到字符类
  6. ] => 结束字符类 （4）
  7. {$length} => 设置字符串长度以匹配字符类（输入单词的长度）
  8. .* => 匹配以下任意字符 0 次或更多次
  9. ) => 结束捕获组 （3）
  10. $ => 匹配字符串的结尾
  11. / => 结束分量表
  12. 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

试试这个

这是索引.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>

这是你的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;
相关文章：