使用向上和向下箭头进行自动完成搜索

Question

There are many examples onauto complete with jquery in google "eg searching facebook like search jquery"

But I cant find any that show how can you use the up and down arrow keys to scroll down on the results.

My "results" div contains a list of results as shown below:

So how I can scroll down on my results using the up and down arrow keys and the below code?

<form id="search-form" method="get" action="search.php">
    <input class="search-terms" type="text" value="Search" autocomplete="off" name="resultsFor" /> 
    <input class="submit-search" type="submit" value="go" /></form>
    <div id="results" class="shadow" style="display: none;">
      <h4 class="tophit-title" style="background-color: #4AABD8">Top Hits</h4>
      <ul id="tophit-list">
        <li>a target=&quot;_blank&quot; href=&quot;url.com?act=view&amp;id=4 &quot;&gt; 
        <img width="62" height="62" alt="img sample" src="http://127.0.0.1/sample.JPG" /> 
        <span>a carton o 
        <b>f</b> mil</span></li>
        <li>a target=&quot;_blank&quot; href=&quot;url.com?act=view&amp;id=2 &quot;&gt; 
        <img width="62" height="62" alt="img sample2" src="http://127.0.0.1/sample2.JPG" /> 
        <span>a carton o 
        <b>f</b> mil</span></li>
      </ul>
    </div>

This is my jquery function:

$(".search-terms").keyup(function (e) {
    var searchbox = $(this);

    switch (e.keyCode) {

        case 38:
            alert("UP");
            break;
        case 40:
            alert("DOWN");
            break;
    }
});

Answer 1

This is a basic function to move through a list using the arrow keys.

$("ul").keydown(function (e) {
    var searchbox = $(this);
    switch (e.which) {
        case 40:
            $('li:not(:last-child).selected').removeClass('selected')
                 .next().addClass('selected');
            break;
        case 38:
            $('li:not(:first-child).selected').removeClass('selected')
                 .prev().addClass('selected');
            break;
    }
});

We can apply this to a form with an input to move the selected item. The focus needs to remain on the input for this to work

 $(".search-terms").keydown(function(e) { switch (e.which) { case 40: e.preventDefault(); // prevent moving the cursor $('li:not(:last-child).selected').removeClass('selected') .next().addClass('selected'); break; case 38: e.preventDefault(); // prevent moving the cursor $('li:not(:first-child).selected').removeClass('selected') .prev().addClass('selected'); break; } }); $('.search-terms').keyup(function() { if (this.value.length >= 1) { $('#results').show(); } else { $('#results').hide(); } }) 

 .selected { color: red } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form id="search-form" method="get" action="search.php"> <input class="search-terms" type="text" value="" placeholder='Search' autocomplete="off" name="resultsFor" /> <input class="submit-search" type="submit" value="go" /></form> <div id="results" style="display: none;"> <h4 class="tophit-title" style="background-color: #4AABD8">Top Hits</h4> <ul tabindex='1'> <li class='selected'>ok</li> <li>ok</li> <li>ok</li> <li>ok</li> <li>ok</li> </ul> </div> 

Answer 2

In one of the projects I was on I recalled making something like that. I dug up the code for your inspection (DSL stands for Dynamic Search List):

var dslTimer = [];
var dslData = [];
var dslControls = [];
var dslSelected = [];
var dslSelectedIndex = 0;

var callBackFunction;

function addDsl(inputField, dslPlaceHolder, dslUrl, maxDepth, callback, countryLimitation) {
    var dslIndex = dslControls.length + 1;
    dslControls[dslIndex] = [inputField, dslPlaceHolder, dslUrl, maxDepth, countryLimitation];
    callBackFunction = callback;

    $('#' + inputField).keyup(function(e) {
        var key = e.keyCode;
        if (key == '13') {
            if ($('#' + dslControls[dslIndex][1]).hasClass('hidden') && $('#' + inputField).val().length > 0) {
                if (callback == null) {
                    $('#' + dslControls[dslIndex][1]).closest('form').submit();
                }
                else {
                    callback();
                }
            }
            else {
                $('#' + dslControls[dslIndex][1]).addClass('hidden');
            }
        } else if (key == '38') {
            //Up key
            $('#' + dslControls[dslIndex][1] + ' ul li:nth-child(' + dslSelectedIndex + ') a').removeClass('highlight');
            dslSelectedIndex -= 1;
            if (dslSelectedIndex < 0) {
                dslSelectedIndex = $('#' + dslControls[dslIndex][1] + ' ul li').length;
            }
            $('#' + dslControls[dslIndex][1] + ' ul li:nth-child(' + dslSelectedIndex + ') a').addClass('highlight');

            var str = $('#' + dslControls[dslIndex][1] + ' ul li:nth-child(' + dslSelectedIndex + ') a').text();
            if (str != null && str != "") {
                $('#' + dslControls[dslIndex][0]).val(str);
            }
        } else if (key == '40') {
            //Down key
            $('#' + dslControls[dslIndex][1] + ' ul li:nth-child(' + dslSelectedIndex + ') a').removeClass('highlight');
            dslSelectedIndex += 1
            if (dslSelectedIndex > $('#' + dslControls[dslIndex][1] + ' ul li').length) {
                dslSelectedIndex = 0;
            }
            $('#' + dslControls[dslIndex][1] + ' ul li:nth-child(' + dslSelectedIndex + ') a').addClass('highlight');

            var str = $('#' + dslControls[dslIndex][1] + ' ul li:nth-child(' + dslSelectedIndex + ') a').text();
            if (str != null && str != "") {
                $('#' + dslControls[dslIndex][0]).val(str);
            }
        } else {
            var input = $('#' + dslControls[dslIndex][0]).val();

            if (input.length >= 2) {
                window.clearTimeout(dslTimer[dslIndex]);
                dslTimer[dslIndex] = window.setTimeout('doDsl(' + dslIndex + ')', 100);
            }
            else {
                $('#' + dslControls[dslIndex][1]).addClass('hidden');
            }
        }
    });
    $('#' + inputField).blur(function(e) {
        window.setTimeout('blurDsl(' + dslIndex + ')', 500);
    });

    return dslIndex;
}

function doDsl(dslIndex) {
    getDsl(dslIndex, $('#' + dslControls[dslIndex][0]).val());
}

function getDsl(dslIndex, searchstring) {
    if (searchstring.length < 2) {
        return;
    }

    var postData = { 'input': searchstring, 'maxDepth': dslControls[dslIndex][3] };
    if (typeof (dslControls[dslIndex][4]) != 'undefined' || dslControls[dslIndex][4] != null) {
        postData.countryId = dslControls[dslIndex][4].val();
    }

    $.ajax({
        type: 'POST',
        url: dslControls[dslIndex][2],
        data: postData,
        dataType: "json",
        contentType: "application/x-www-form-urlencoded",
        timeout: 60000,
        global : false,
        success: function (data) {
            (data.length > 0)
                ? showDsl(dslIndex, data)
                : blurDsl(dslIndex);
        }
    });
}

function showDsl(dslIndex, data) {
    dslData[dslIndex] = data;
    dslSelected[dslIndex] = null;

    var htmlString = '<ul>';
    var searchText = $('#' + dslControls[dslIndex][0]).val().ignoreAccent();

    $.each(data, function(i, item) {
        var text = item.Text;
        var accentlessText = item.AccentlessText.Value;

        var boldStart = accentlessText.toLowerCase().indexOf(searchText.toLowerCase());
        while (boldStart > -1 && searchText.length > 0) {
            text = text.substring(0, boldStart) + '<strong>' + text.substring(boldStart, (boldStart + searchText.length)) + '</strong>' + text.substring((boldStart + searchText.length), text.length);

            boldStart = accentlessText.toLowerCase().indexOf(searchText.toLowerCase(), (boldStart + 17 + searchText.length));
        }
        htmlString += '<li><a href="javascript:void(0)" onmousedown="selectDsl(' + dslIndex + ', \'' + item.Id + '\')" tabindex="' + (1000 + i) + '">' + text + '</a></li>';
    });
    htmlString += '</ul>';

    $('#' + dslControls[dslIndex][1] + ' ul').replaceWith(htmlString);

    dslSelectedIndex = 0;
    if (data.length > 0) {
        $('#' + dslControls[dslIndex][1]).removeClass('hidden');
    }
}

function selectDsl(dslIndex, id) {
    $('#' + dslControls[dslIndex][1]).addClass('hidden');
    $.each(dslData[dslIndex], function(i, item) {
        if (item.Id == id) {
            $('#' + dslControls[dslIndex][0]).val(item.Text);
            dslSelected[dslIndex] = item;
            if (callBackFunction != null) {
                callBackFunction();
            }
        }
    });
}

function blurDsl(dslIndex) {
    $('#' + dslControls[dslIndex][1]).addClass('hidden');
}

// Source: https://github.com/zimny/accentless
(function () {
    if (String.prototype.ignoreAccent) return;

    var AccentCharCodesTable = {
        "a": [224, 229],
        "A": [192, 198],
        "c": [231, 231],
        "C": [199, 199],
        "e": [231, 235],
        "E": [200, 203],
        "i": [236, 239],
        "I": [204, 208],
        "n": [241, 241],
        "N": [209, 209],
        "o": [242, 246],
        "O": [209, 214],
        "s": [353, 353],
        "S": [352, 352],
        "u": [248, 252],
        "U": [216, 220],
        "y": [253, 253],
        "Y": [221, 221],
        "z": [382, 382],
        "Z": [381, 381]
    };

    String.prototype.ignoreAccent = function() {
        var i, currentCharCode, char, str = this.split("");

        for (i = 0; i < str.length; i++) {
            currentCharCode = str[i].charCodeAt(0);
            if (currentCharCode < 192) continue;
            for (char in AccentCharCodesTable) {
                if (AccentCharCodesTable.hasOwnProperty(char)) {
                    if (currentCharCode >= AccentCharCodesTable[char][0] && currentCharCode <= AccentCharCodesTable[char][1]) {
                        str[i] = char;
                        break;
                    }
                }
            }
        }
        return str.join("");
    };
})();