(JQuery)在文本框中使用单词或短语触发动作

(JQuery) Use of word or phrase in textbox triggers action

本文关键字：短语 单词 JQuery 文本      更新时间：2023-09-26

我目前有一个工作的jQuery查找某个短语和触发器:

$("#id_message").on('keyup', function(){
    if($('#id_message').val().toLowerCase().indexOf('foo foo') > -1){
        doEgg();
    }
});

然而，我希望能够将其扩展到单词或短语列表。像这样有一个单独的列表，我假设它需要在数组中?

var phraseList = [
    "foo foo",
    "foobar",
    "fooby foo foobar"
];

如何让它搜索单词列表?我想这个列表可能只有5个短语左右。如果用户输入"i like to foo foo"或"i love it at the foobar"，它仍然会被触发，因为文本框中包含了列表中的单词。

还有一个附加的问题，我有这个脚本，如果用户决定删除短语，它也会取消函数:

$("#id_message").on('keyup', function(){
    if($('#id_message').val().toLowerCase().indexOf('foo foo') == -1){
        undoEgg();
    }
});

编辑# 1

我找到的最接近的答案来自@ nixfull - autistic:

$("#id_message").on('keyup', function(){
    for(var i=0;i<phraseList.length;i++){
        if($('#id_message').val().toLowerCase().indexOf(phraseList[i]) > -1){
            doEgg();
        }
    }
});

编辑# 2

我相信我知道问题在哪里!

文本框的。indexof的值设置为-1，因为它通过字符的方式工作，直到它从phraseList数组中找到一个单词或短语…然后赋值> -1

因此，每当出现keyup事件时，indexOf的值最初被设置为-1，直到它可以找到一个单词或短语。因此，这会导致doEgg()和undoEgg()函数被快速连续地调用和取消调用。

所以我认为我需要一种方法来扫描整个文本框之前分配。indexof值。

这可能吗?

    $("#id_message").on('keyup', function () {
        phraseList.indexOf(this.value) > -1 ? //your code (i.e. doEgg()) :"";
    });


$("#id_message").on('keyup', function(){
  for(var i=0;i<phraseList.length;i++){
    if($('#id_message').val().toLowerCase().indexOf(phraseList[i]) > -1){
        doEgg();
    }
  }
});

更新

我想要一个建议

$("#id_message").on('keyup', function(){
          for(var i=0;i<phraseList.length;i++){
            if($('#id_message').val().toLowerCase().indexOf(phraseList[i]) > -1){
                doEgg();
            }else{
                undoEgg(); 
            }
          }
});

2更新尝试在函数

之外声明这些变量

var变化;var changeback; 

function doEgg(){
    if(changeback)clearInterval(changeback); //if changeback isRunning
    audioElement.play();
    //var change = setInterval(function () {
    change = setInterval(function () {
            ...
}
function undoEgg(){
    if(change)clearInterval(change); //if change isRunning
    audioElement.pause();
    //var changeback = setInterval(function () {
   changeback = setInterval(function () {
            ...
}

我猜是这样的:

var phraseList = [
    "foo foo",
    "foobar",
    "fooby foo foobar"
];
$("#id_message").on('keyup', function(){
    if(phraseList.indexOf(this.value) > -1){
        //doEgg();
        alert(phraseList[phraseList.indexOf(this.value)]); // alerts the matched string in the word list array.
    }
});


var phraseList = [
  "foo foo",
  "foobar",
  "fooby foo foobar"
];
$("#id_message").on('keyup', function() {
  if (phraseList.indexOf(this.value) > -1) {
    alert(phraseList[phraseList.indexOf(this.value)]);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='id_message'>

使用$.inArray()如下:

var phraseList = [
    "foo foo",
    "foobar",
    "fooby foo foobar"
];
if ( $.inArray("foo foo", phraseList) !== -1 ) {
    alert ("yes");
}
所以，你的代码变成了: 
$("#id_message").on('keyup', function() {
    var val = $(this).val().toLowerCase();
    if ( $.inArray(val, phraseList) !== -1 ) {
        doEgg();
    }
});

编辑:根据您的评论更新的片段:

$("#id_message").on('keyup', function() {
    var value = $(this).val().toLowerCase();
    $.each(phraseList, function(index, val) {
        if ( value.indexOf(val) !== -1 ) {
            doEgg();
        }
    });
});
相关文章：