一个小小的问题，反而搞了几天，香菇蓝瘦

cqwcns · 发表于 2019-10-15 13:20

各位大哥好，以下是twitter typeahead的一个实例，用于文本框自动补全，类型百度搜索框那种。
问题：我想input失去焦点时，判断如果input的值是否在列表数组中（substringMatcher(states)），就清空input。目的是input最后提交的内容必须是在列表选择的，不允许用户随便填。
代码要怎么写？
我试了一下，用遍历数组判断是否==input.val的是没有问题的，就是清空不了input，原因可以与typeahead.js有个，你们留意运行是的html，typeahead会增加几个元素。
麻烦高手帮忙改一下代码，实现这个功能，感谢。

[HTML] 纯文本查看 复制代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link  rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
</head>

<body>
<div class="example" id="the-basics">
  <div class="demo">
    <input class="typeahead" type="text">
  </div>
</div>
<script>
  var substringMatcher = function(strs) {
    return function findMatches(q, cb) {
      var matches, substringRegex;
      // an array that will be populated with substring matches
      matches = [];
      // regex used to determine if a string contains the substring `q`
      substrRegex = new RegExp(q, 'i');

      // iterate through the pool of strings and for any string that
      // contains the substring `q`, add it to the `matches` array
      $.each(strs, function(i, str) {
        if (substrRegex.test(str)) {
          matches.push(str);
        }
      });
      cb(matches);
    };
  };

  var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
    'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
    'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
    'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
    'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
    'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
    'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
    'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
    'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
  ];

  $('#the-basics .typeahead').typeahead({
    hint: true,
  },
  {
    name: 'states',
    source: substringMatcher(states)
  });
	</script>
</body>
</html>

15774211127 · 发表于 2019-10-15 13:25

所以是需要input的值在列表数组中就清空input，还是input的值不在列表数组中就清空input
可以表述清楚下吗

cqwcns · 发表于 2019-10-15 13:29

15774211127 发表于 2019-10-15 13:25
所以是需要input的值在列表数组中就清空input，还是input的值不在列表数组中就清空input
可以表述清楚下吗

如果input的值不在数组中，则清空input。

cqwcns · 发表于 2019-10-15 13:32

另外，注意，以上代码只是个demo，实际上我的html是动态load的。

假如要写input的失去焦点事件，好像要这样写：

[JavaScript] 纯文本查看 复制代码

$("body").on("blur", ".typeahead", function () {

}；

15774211127 · 发表于 2019-10-15 13:34

cqwcns 发表于 2019-10-15 13:29
如果input的值不在数组中，则清空input。

可以试一下这个

cqwcns · 发表于 2019-10-15 13:41

15774211127 发表于 2019-10-15 13:34
可以试一下这个

大哥你好，好像不行，不知道我的代码有没有写错。

[HTML] 纯文本查看 复制代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link  rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
</head>

<body>
<div class="example" id="the-basics">
  <div class="demo">
    <input id="typeahead" class="typeahead" type="text">
  </div>
</div>
<script>
	var input=$("#typeahead")[0];
  var substringMatcher = function(strs) {
    return function findMatches(q, cb) {
      var matches, substringRegex;
      // an array that will be populated with substring matches
      matches = [];
      // regex used to determine if a string contains the substring `q`
      substrRegex = new RegExp(q, 'i');

      // iterate through the pool of strings and for any string that
      // contains the substring `q`, add it to the `matches` array
      $.each(strs, function(i, str) {
        if (substrRegex.test(str)) {
          matches.push(str);
        }
      });
		if(matches.length==0){
			input.value="";
		}
      cb(matches);
    };
  };

  var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
    'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
    'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
    'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
    'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
    'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
    'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
    'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
    'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
  ];

  $('#the-basics .typeahead').typeahead({
    hint: true,
  },
  {
    name: 'states',
    source: substringMatcher(states)
  });
	
	</script>
</body>
</html>

15774211127 · 发表于 2019-10-15 13:46

cqwcns 发表于 2019-10-15 13:41
大哥你好，好像不行，不知道我的代码有没有写错。

[mw_shl_code=html,true]

是这个效果吗(我gif最后输了一个其他字符所以input被清空)

天灾丶人灬 · 发表于 2019-10-15 14:36

$('.typeahead').on('blur', function() {
if(states.indexOf(this.value) == -1){
this.value = ''
return
}
alert(this.value)
})

是这个么？

cqwcns · 发表于 2019-10-15 15:10

本帖最后由 cqwcns 于 2019-10-15 15:19 编辑

两位大哥，我错了

数字哥（15774211127）的代码还不能符合预期，我希望的是input失去焦点再判断，input值必须完成等于列表的某一行，才会被保留，例如input的值是a，虽然数组包含a字符，但由于a不是数组的某一行，所以input还是要清空。这个功能其实另一个类似的插件是自带的，大家可以参考一下：http://www.lovewebgames.com/jsmodule/autosearch.html

另外，我为了大家好了解，写了一个typeahead的基本demo，但我实际采用的是Bloodhound的remote。
我以为大家指导后我应用到remote就行，结果因为代码完全不一样，水平低，搞不定

。
麻烦大哥再帮忙看看如果是remote该怎么实现？谢谢

typeahead官网：http://twitter.github.io/typeahead.js/examples/
github：https://github.com/twitter/typeahead.js

[HTML] 纯文本查看 复制代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link  rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
</head>
 
<body>
<div class="example" id="the-basics">
  <div class="demo">
    <input class="typeahead" type="text">
  </div>
</div>
<script>
  var bestPictures = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: 'http://twitter.github.io/typeahead.js/data/films/post_1960.json',
    remote: {
      url: 'http://twitter.github.io/typeahead.js/data/films/queries/%QUERY.json',
      wildcard: '%QUERY'
    }
  });

  $('#remote .typeahead').typeahead(null, {
    name: 'best-pictures',
    display: 'value',
    source: bestPictures
  });
     
    </script>
</body>
</html>

Antigen · 发表于 2019-10-15 15:15

学习是你唯一的出路

帐号		自动登录	找回密码
密码			注册[Register]

[求助] 一个小小的问题，反而搞了几天，香菇蓝瘦