Question

I am trying to make a name tagger in jquery + php. I have done the PHP part and jquery code is 99% done, but my problem is passing the string to search for after the ‘@’ sign. I currently use a div with contentEditable set to true. From what I see in console log the name variable is indeed @+search string, but the list div will not be populated, I tried running the script manually just to debug and it works, including setting the name variable to one specific letter and it populates the list div. Any tips and suggestions appreciated my code below:

$("#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;
});

Answer 1

Try changing your ajax call to this:

$.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();
    }
});

What, if anything, do you see in the console?

UPDATE

If you’re not seeing anything, AJAX isn’t getting called. Try a console log to make sure checker actually equals '@'.

UPDATE:

The fundamental problem you’re going to have with your logic is that the AJAX function will only be called when checker === '@'. As checker is the last character that the user typed, name will never exist when checker === '@'.

I would suggest the following logic instead:

$(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);
});