Fatal编程技术网
  • javascript/
  • Javascript 使用上下箭头进行自动完成搜索

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

javascript jquery html

Javascript 使用上下箭头进行自动完成搜索,javascript,jquery,html,Javascript,Jquery,Html,在google中有许多自动完成jquery的例子，比如像搜索jquery一样搜索facebook 但是我找不到任何显示如何使用向上和向下箭头键在结果上向下滚动的信息 My results div包含一个结果列表，如下所示： 那么，如何使用上下箭头键和下面的代码向下滚动我的结果呢 <form id="search-form" method="get" action="search.php"> <input class="search-terms" type="text"

在google中有许多自动完成jquery的例子，比如像搜索jquery一样搜索facebook

但是我找不到任何显示如何使用向上和向下箭头键在结果上向下滚动的信息

My results div包含一个结果列表，如下所示：

那么，如何使用上下箭头键和下面的代码向下滚动我的结果呢

<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>
这是使用箭头键在列表中移动的基本功能

$("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;
    }
});
我们可以将其应用于带有输入的表单，以移动所选项目。需要将重点放在投入上，以使其发挥作用

$.search-terms.keydown函数{ 开关e，哪个{ 案例40： e、 preventDefault；//防止移动光标 $'li:not:最后一个子项。已选定。removeClass'selected' .next.addClass'selected'； 打破 案例38： e、 preventDefault；//防止移动光标 $'li:not:first child.selected'.removeClass'selected' .prev.addClass“已选定”； 打破 } }; $'.search terms'.keyup函数{ 如果this.value.length>=1{ $‘结果’显示； }否则{ $'results'。隐藏； } } .选定{ 颜色：红色 } 热门歌曲 好啊 好啊 好啊 好啊 好啊
这是使用箭头键在列表中移动的基本功能

$("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;
    }
});
我们可以将其应用于带有输入的表单，以移动所选项目。需要将重点放在投入上，以使其发挥作用

$.search-terms.keydown函数{ 开关e，哪个{ 案例40： e、 preventDefault；//防止移动光标 $'li:not:最后一个子项。已选定。removeClass'selected' .next.addClass'selected'； 打破 案例38： e、 preventDefault；//防止移动光标 $'li:not:first child.selected'.removeClass'selected' .prev.addClass“已选定”； 打破 } }; $'.search terms'.keyup函数{ 如果this.value.length>=1{ $‘结果’显示； }否则{ $'results'。隐藏； } } .选定{ 颜色：红色 } 热门歌曲 好啊 好啊 好啊 好啊 好啊
在我参与的一个项目中，我记得我做过类似的东西。我为您的检查找到了代码DSL代表动态搜索列表：

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("");
    };
})();
在我参与的一个项目中，我记得我做过类似的东西。我为您的检查找到了代码DSL代表动态搜索列表：

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("");
    };
})();
您的问题/问题是什么？您是否没有正确捕获事件，或者您的问题是什么？如果您实际要求使用上下键浏览搜索结果的功能，您将在此处找不到答案，因为没有通用的解决方案。您的问题/问题是什么？您是否没有正确捕获事件，或者您的问题是什么？如果你真的需要一个可以通过上下键浏览搜索结果的函数，你在这里找不到答案，因为没有通用的解决方案。谢谢，我稍微修改了一下这个奇怪的东西，你的例子和我的例子都在Mozilla中工作，但没有IE@Athanatos奇怪的它在IE中对我有效。或者你指的是JSFIDLE？奇怪。。你用的是什么版本？我正在使用IE10。@Athanatos相同。是不是按下按钮就不动了？@Athanatos啊啊，我想提一下！把e.keyCode改为e.whichThanks，我稍微修改了一下，你的例子和我的例子都在Mozilla中工作，但没有IE@Athanatos奇怪，这在IE中对我有用。或者你指的是JSFIDLE？奇怪。。你用的是什么版本？我正在使用IE10。@Athanatos相同。是不是按下按钮就不动了？@Athanatos啊啊，我想提一下！将e.keyCode更改为e.which