标签: livesearch

我想在我的MVC应用程序中实现类似于此网站的实时搜索,当您输入问题并且结果与http://www.krop.com/上的搜索类似或类似时

我有搜索代码全部工作和结果更新.我只需要知道如何将AJAX添加到MVC框架(我知道这个站点是使用它构建的),这样当我输入结果时会更新.

我有这一切都在普通的ASP.NET Forms应用程序中工作.

我已经为我的网站创建了一个Facebook风格的ajax搜索,当你输入它时,它会将结果显示在搜索下方的一个很好的列表中.

$("#s").keyup(function() {
    var searchbox = $(this).val();
    var dataString = 's='+ searchbox;
    if(searchbox!='') {
        $.ajax({
            type: "POST",
            url: "/livesearch.php",
            data: dataString,
            cache: false,
            success: function(html){
                $("#display").html(html).show();
            }
        });
    } else {return false; }  
});

$("body").click(function() {
        $("#display").hide();
});

这个问题是它有点无效,因为用户会输入一个单词,例如"football".这将向服务器执行8个请求.什么是更有效的方法来做到这一点？理想情况下,我认为它应该在进行搜索之前存储1秒的请求而不是即时密钥.但不是100%肯定如何做到这一点......

我创建了这个实时搜索组件：

class SearchEngine extends Component {
  constructor (props) {
      super(props);
      this.handleChange = this.handleChange.bind(this);
      this.handleSearch = this.handleSearch.bind(this);
  }
  handleChange (e) {
      this.props.handleInput(e.target.value); //Redux
  }
  handleSearch (input, token) {
     this.props.handleSearch(input, token) //Redux
  };
  componentWillUpdate(nextProps) {
      if(this.props.input !== nextProps.input){
          this.handleSearch(nextProps.input,  this.props.loginToken);
      }
  }
  render () {
      let data= this.props.result;
      let searchResults = data.map(item=> {
                  return (
                      <div key={item.id}>
                              <h3>{item.title}</h3>
                              <hr />
                              <h4>by {item.artist}</h4>
                              <img alt={item.id} src={item.front_picture} />
                      </div>
                  )
              });
      }
      return (
          <div>
              <input name='input'
                     type='text'
                     placeholder="Search..."
                     value={this.props.input}
                     onChange={this.handleChange} />
              <button onClick={() …

我们的 React 应用程序有一个实时搜索，该搜索连接到包含 25 万个人姓名的 MongoDB 集合。在击键时，实时搜索使用正则表达式来抓取集合中的前 20 个文档。我们为 Live Search 获取数据的路径很简单，如下所示：

router.get('/live-search/text/:text', function (req, res) {
    let text = req.params.text;
    let queryFilters = { label: { $regex: `${text}`, $options: 'i' } };

    db.gs__ptgc_selects.find(queryFilters).limit(20)
        .then(data => res.json(data))
        .catch(err => res.status(400).json('Error: ' + err))
});

我确定我们的集合有文本索引，它是在label列上设置的。这是我们的 MongoDB Atlas 页面的屏幕截图，如下所示：

问题是该索引似乎不起作用。每当使用我们应用程序的实时搜索时（一直如此），我继续收到电子邮件警告Query Targeting: Scanned Objects / Returned has gone above 1000。我已经检查了这些查询的 MongoDB Atlas Profiler，并且（我认为）确认没有使用索引：

我错过了什么吗？很难从中创建一个完全可重现的示例。我们一直在努力使用 MongoDB 文本索引并将其与我们的实时搜索一起使用。

编辑

也许我需要使用$search，就像在这里完成的一样：https : //docs.mongodb.com/manual/text-search/。我目前正在使用 进行字符串匹配regex，但没有使用 …

我想用php代码中的选项填充以下select语句

<select name='friends[]' id='friends' class='selectpicker show-tick form-control'
        data-live- search='true' multiple>
    <!-- options here -->
</select>

我的jQuery代码

$.ajax({
    url:'get_togethers.php', //this returns object data
    data:'user_id='+user_id,
    type:'POST',
    datatype:'json',
    success:function(data) { //data = {"0":{"id":1,"name":"Jason"},"1":{"id":2,"name":"Will"},"length":2 }
        data = JSON.parse(data);
        var options;
        for (var i = 0; i < data['length']; i++) {
            options += "<option value='"+data[i]['id']+"'>"+data[i]['name']+"</option>";
        }
        $("#friends").append(options);
    }
});

select标记内的静态值显示,但从ajax函数添加的值不显示.编辑:如果我从中删除引导程序,值显示,但启动引导程序,它们不会显示.

我正在开发一个JavaFX 8应用程序,我有一个tableView和一些textFields,可以搜索/过滤tableView中的某些列.我已经为textFields添加了一个监听器,以便在检测到更改时自动触发过滤.我使用下面的代码来做到这一点.

textField_filterAddress.textProperty().addListener((observable, oldValue, newValue) -> {
            doSomething(); // in this case, filter table data and refresh tableView afterwards
        });

我现在的问题是:在过滤被触发之前,什么是最简单的集成某种时间延迟的方法？我想等几毫秒,因为每次用户过滤它时都在执行一个新的数据库查询,我认为这对于用户输入的每个字符都不是必需的.我宁愿等到他/她完成了他的输入.是否有某种类似的功能已经内置到整个听众的事情中？或者我必须实施自己的解决方案？如果是这样,怎么样？我考虑过某种并发解决方案,因此其他软件在等待期间不会冻结.但我以为我会问这里是否有一个更简单的解决方案,然后再考虑我自己的方式......

非常感谢提前!

我正在为一个网站构建实时搜索，该网站将根据用户键入的内容返回结果。我只希望在用户完成输入后发送请求。

我已经尝试了一些使用计时器甚至来自 underscore.js 的 debounce 方法的实现，但我似乎总是得到类似的结果。

在我打字时，请求被延迟，直到我完成打字。但是随后它似乎会触发所有输入，就好像它们已排队一样。例如，如果我输入“自行车”，结果如下：

b

bi

bik

bikes

因此，您将获得搜索结果流。

这是我当前使用下划线 js 的实现

$('#search_term').on('keyup', _.debounce(function (e) {

       $.ajax({
            type: "GET",
             url: "quicksearch.php",
            data: { search_term:$('#search_term').val()},
            success: function(msg){
              $('#quick_search_results').html(msg).slideDown();
            }
    });

}, 100));

谁有想法？

我正在搜索超过10000行的数据集.我已经提到了可用的dom结构.虽然我尝试在单次输入后进行实时搜索检查每个结果,但我的浏览器正在挂起.有没有其他有效的方法可以降低其复杂性.

<label class="label">
    <input type="checkbox" name="123" value="">
</label>
<label class="label">
    <input type="checkbox" name="123" value="   General AUX"> General AUX
</label>
<label class="label">
    <input type="checkbox" name="123" value=" Annser"> Annser
</label>
<label class="label">
    <input type="checkbox" name="123" value=" LRIPL"> LRIPL
</label>
<label class="label">
    <input type="checkbox" name="123" value=" Soy Impulse"> Soy Impulse
</label>

**是的,实时搜索DOM**JS代码,我用于实时搜索

 $(".form-container #filter").keyup(function() {
 var filter = $(this).val(),
                    count = 0;
                if(filter.length>=2){
                // Loop through the comment list
                $(".label").each(function() {

                    // If the list item does not contain the text phrase fade …