0

我正在尝试在 jquery + php 中制作名称标记器。我已经完成了 PHP 部分，并且 jquery 代码已完成 99%，但我的问题是传递字符串以在“@”符号之后进行搜索。我目前使用 contentEditable 设置为 true 的 div。从我在控制台日志中看到的 name 变量确实是@+search 字符串，但不会填充列表 div，我尝试手动运行脚本只是为了调试并且它可以工作，包括将 name 变量设置为一个特定的字母填充列表 div。任何提示和建议都对我下面的代码表示赞赏：

$("#chat-message").bind("keyup", function (event) {
    //auto name complete
    var search = $(this).text();
    var searchbox = search.split(search.indexOf('@') + 1);
    var checker = search.substr(search.length - 1); //Checks last charcter inserted if its '@'
    var name = search.match(/@(\w+)/ig);
    console.log(name);
    var dataString = 'searchword=' + name + '&search=yes';
    if (name == '' || checker == " ") {
        $("#display-search").hide();
    } else if (checker === "@") {
        $.ajax({
            type: "POST",
            url: "searchy.php",
            data: dataString,
            cache: false,
            success: function (html) {
                $("#display-search").html(html).show();
            }
        });
    }
    return false;
});
4

1 回答 1

1

尝试将您的ajax呼叫更改为：

$.ajax({
    "type": "POST",
    "url": "searchy.php",
    "data": {
        "searchword": name,
        "search": "yes"
    },
    "cache": false,
    "error": function (jqXHR, textStatus, errorThrown) {
        // log error to browser console
        console.log(textStatus + ': ' + errorThrown);
    },
    "success": function (data, textStatus, jqXHR) {
        console.log(data);
        $("#display-search").html(data).show();
    }
});

如果有的话，您在控制台中看到了什么？

更新

如果你没有看到任何东西，AJAX 就不会被调用。尝试控制台日志以确保checker实际等于'@'。

更新：

您的逻辑将遇到的基本问题是 AJAX 函数只会在checker === '@'. 就像用户输入checker的最后一个字符一样，name当checker === '@'.

我建议改为以下逻辑：

$(document).ready(function () {
    'use strict';
    var ajaxIsActivelyPosting = false, // flag to prevent a post on every keyup
        searchForTerm = function searchForTerm(e) {
            //auto name complete
            var search = $(this).text(), //get the text
                matches = search.match(/@(\w+)\s?/ig), // get any matches
                name = matches ? matches : ''; // if there are matches, set the name
            if (name && !ajaxIsActivelyPosting) { // if there's a match, name will be truthy
                $.ajax({
                    "type": "POST",
                    "url": "searchy.php",
                    "data": {
                        "searchword": name,
                        "search": "yes"
                    },
                    "cache": false,
                    "beforeSend": function (jqXHR, settings) {
                        ajaxIsActivelyPosting = true; //set the flag
                    },
                    "complete": function (jqXHR, textStatus) {
                        ajaxIsActivelyPosting = false; //clear the flag
                    },
                    "error": function (jqXHR, textStatus, errorThrown) {
                        // log error to browser console, always helpful to have
                        console.log(textStatus + ': ' + errorThrown);
                    },
                    "success": function (data, textStatus, jqXHR) {
                        console.log(data); //see raw result in browser console
                        $("#display-search").html(data).show();
                    }
                });
            } else {
                $('#display-search').hide();
            }
            return false;
        };
    $('#chat-message').bind('keyup', searchForTerm);
});
于 2013-01-12T06:17:07.033 回答