react autocomplete tokeninput 怎么用

Posted 2023-05-09

参考技术A 内含二个皮肤，其中个人比较推崇facebook的那个样式。大家可以看截图和演示 目前这个插件完美支持英文，但在中文输入的有bug，就是你输入完中文后，退删除一个字符，才会触发ajax事件。之前有好几个朋友向我询问解决方案。 现在已经解决这一个问题，其实只要把keydown换为keyup即可。中文示例与修改后的源代码请看压缩包 插件使用说明： 第一步：引进JQ库和插件JS文件,还有CSS文件 <script src="/admin/blogs/jquery-1.3.2.min.js" type="text/javascript"></script><script src="/admin/blogs/jquery.tokeninput.js" type="text/javascript"></script> 其中的token-input-facebook.css，就是我所说的facebook样式。 第二步：初始化插件 $("#tokenize").tokenInput("./test.php", hintText: "Type in the names of your favorite TV shows", noResultsText: "No results", searchingText: "Searching..." ); 第三步：服务器端编程（这里使用php） 关键点说明：插件会向服务器端传输查询字段q,使用的是get方法。所以服务器端通过截取q值，来提取数据库的数据，php中： $_GET['q']。最后返回的必须是json数据结构： ["id":"856","name":"House", "id":"1035","name":"Desperate Housewives", "id":"1048","name":"Dollhouse", "id":"1113","name":"Full House" ]

Material UI AutoComplete 不在 React 应用程序中的远程数据源上呈现

【中文标题】Material UI AutoComplete 不在 React 应用程序中的远程数据源上呈现

【英文标题】：Material UI AutoComplete not rendering on remote dataSource in React application

【发布时间】：2016-09-16 09:44:37

【问题描述】：

我正在使用 React 15.0.1 和 Material-UI 0.15.0。我正在尝试通过 React 呈现自动完成功能。这是我的代码：

import React from 'react';

import SomeService from '../../../services/SomeService';

import AutoComplete from 'material-ui/AutoComplete';

class SearchInput extends React.Component 
  constructor (props) 
    super(props);
    
    this.state = 
      dataSource: []
    ;
  
  
  searchSomething (value) 
    if (value.length) 
      SomeService.fetchAutocomplete(searchQuery: value)
        .then((res) => this.handleSuccess(res.data),
              (err) => this.handleFailure(err));
     else 
      this.setState(
        dataSource: []
      );
    
  ;
  handleSuccess (response) 
    this.setState(dataSource: response.slice(0, 10));
  
  handleFailure (err) 
    console.log(err);
  
  
  render () 
    return (
      <div>
        <AutoComplete
          floatingLabelText='Enter test'
          dataSource=this.state.dataSource
          onUpdateInput=(val) => this.searchSomething(val)
          fullWidth=true />
      </div>
    );
  


export default SearchInput;

假设我得到一个带有数据的响应对象： [...] // 一个东西数组。 这没有被渲染。

响应对象类似于：

reponse: 
  ....,
  data: ['Apple', 'Banana', 'Orange'],
  ....

谁能帮帮我？

【问题讨论】：

你能展示一个对象的例子吗？属性的名称..

响应对象？ response: ...., data: ['Apple', 'Banana', 'Orange', ....], .....

如果您在render 函数中添加控制台，您可以看到这些值对吗？

另外，您键入的每个字符都会调用 onUpdateInput 函数。所以您在执行许多请求时可能会遇到问题。-例如，我建议您在 500 毫秒内对其进行去抖动

@AndréJunges 是的，我得到了这些值。让我试试去抖动。

【参考方案1】：

根据this 问题和提到的评论，您只需要通过为所有内容传递 true 来跳过过滤器功能。

    <AutoComplete
          floatingLabelText='Enter test'
          dataSource=this.state.dataSource
          onUpdateInput=(val) => this.searchSomething(val)
          fullWidth=true 
          filter=(searchText, key) => true />

【讨论】：

好的。让我试试这个。

@ni8mare 这是一个修复吗？

是的，这修复了它。谢谢。