【问题标题】：Autosuggestion Javascript/PHP/AJAX Code自动提示 Javascript/PHP/AJAX 代码
【发布时间】：2013-11-04 09:24:07
【问题描述】：

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

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

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

我的问题：

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

【问题讨论】：

你真的需要AJAX
您是在寻找算法还是开箱即用的解决方案也可以？如果是这样，请尝试 solr wiki.apache.org/solr/Suggester
是的，先生，我们需要 AJAX
请检查我编辑的问题
看看这里。 stackoverflow.com/questions/18163775/…

标签： javascript php jquery autocomplete autosuggest

【解决方案1】：

试试这个

这里是 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>

而这个就是你的 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;

【讨论】：

【解决方案2】：

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 的子divs 以替换#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

【讨论】：

我还应该指出，这是一种粗制滥造的方法；虽然对于小单词列表很好，但它会为较长的列表以及输入字段中有更多（不同）字符时输出大量建议（没有过滤）。
首先感谢 Steven，我取消了
$min = $length - 1; 的注释//单词长度 - 1 $max = $length + 1; //单词长度+ 1 我得到以下3个问题。 I. 当我输入"milyk w" 时，它显示建议"milky way"，非常好，但是当我尝试输入"milyk wy" 时，它没有显示建议。二、当我使用退格键擦除所有字符时，萤火虫会抛出一个，语法错误：JSON.parse：意外字符
III.我试过以下错别字
1. mcroisoft - 好的 2. micro soft - 不好 3. micro sfot - 不好 4. microsotf - 好的 5. mirco sfto - 不好 6. icro soft - 不好 7. mivro soft (mercy) - 不好 8. microsogt (怜悯） - 不好
对 Not Ok 的评论：2. micro soft - 尝试使用空间 3. micro sfot - 但 's','f','o','t' 在 'microsoft' 中可用 5. mirco sfto - 但 's','f','t','o' 在 'microsoft' 中可用 6. icro soft - 缺少第一个字母 'M'，但剩余的字符在 'microsoft' 中可用 7. mixro soft (怜悯) - 一个错误的字母 'v' 而不是 'c'，因为 x 出现在 c 之前 8. microsogt (mercy) - 一个错误的字母 'g' 而不是 'f'，因为 g 出现在 f 旁边
好的，JSON.parse 错误很容易解决。将if(empty($_GET['word'])){exit;} 添加到脚本的开头。发生错误是因为当输入为空时有几个函数返回错误。