在 Laravel 5.2 的发布请求中传递 Algolia id 属性而不是 Name Atributre

pass Algolia id attribute instead of Name Atributre in a post request on Laravel 5.2

本文关键字：id Algolia 属性 Atributre Name Laravel 布请求 请求      更新时间：2023-09-26

使用Jeffery Way和Algolia文档展示的Javascript，Vue.js和Typeahead.js方式从Algolia平台索引json对象。

目前，当我搜索我需要的结果并点击提交按钮时，它正在发布请求中传递 name 属性。

如何传递名称和 id 属性，或者如果只是 ID arrtibute 就可以工作。

<script>
new Vue({
    el: 'body', 
    data: {     
    query: '',
    users: []       
    },  
ready: function(){
this.client = algoliasearch("MYID", "MYAPI");
this.index = this.client.initIndex('dev_category_list');
$('#typeahead').typeahead(null, {   
    source: this.index.ttAdapter(),
    displayKey: 'name'
});
},
  methods: {
    search: function(){
        if (this.query.length < 3) return;
    this.index.search(this.query, function(error, results){
    this.users = results.hits;
    }.bind(this));
    }     
}  
})
</script>

作为一个全新的 laravel、vuejs 和 javascript，在解释文档中的说明时，很难掌握使用的语法和短语，因此任何帮助将不胜感激。

我的索引对象如下所示：

{
  "id": "3",
  "name": "My Product 3",
  "value": "3",
  "alternative_name": "Prod 3",
  "objectID": "3"
}

我希望一旦用户从algolia下拉菜单中选择给定的结果并点击提交，就可以在post请求中传递ID或objectID的值以及name属性，如果不可能，只有ID可以如上所述工作。

谢谢。

--- 更新引用耶尔斯卡：---

好的，所以在作为新手玩了一会儿之后，我似乎让它工作了，我不确定这有多安全或有多可靠，希望我离我需要的地方不会有一百万英里。很高兴看到您的个人和专业想法是什么。

.on('typeahead:select', function (e, suggestion) {
   $('#typeahead').change(function() {
    var val = suggestion.id;
    $('#st').val(val);
});
我创建了一个隐藏的输入字段，

并命名为"st"用于演示，并且在更新algolia结果时，jquery正在使用.change函数将值附加到隐藏的输入字段值。这样表单就可以按照我最初想要和希望的方式继续和sibmit， 这里的好处是，即使用户要从 algoia 下拉菜单中选择结果，也可以继续使用表单， 如果他或她决定要返回搜索字段并更改它， 他们可以在提交表单之前或任何窗口运行之前完成.location，我什至想到使用ajax或简单的jquery $.post，但它工作正常.change。

期待听到您的想法。谢谢

如果要重定向到项目页面，typeahead:select事件会为您提供所选选项：

$('#your-input')
  .typeahead(/* ... */)
  .on('typeahead:select', function (e, suggestion) {
    window.location = suggestion.url;
  });

与阿尔戈利亚相比 重定向至搜索结果

您可以通过 suggestion 参数访问所选对象。你绝对可以使用类似的东西

window.location = 'YOUR_URL?id=' + suggestion.id + '&name=' + suggestion.name;

这假设您使用的是typeahead.js@0.11 .
typeahead.js无人维护，Algolia 建议使用自己的 typeahead.js@0.10 叉，autocomplete.js。

以下是不同的事件名称和处理程序签名，具体取决于您使用的库/版本：

  • typeahead.js@0.11 ： typeahead:select -> function($event, suggestion)
  • typeahead.js@0.10 ： typeahead:selected -> function($event, suggestion, datasetName)
  • autocomplete.js ： autocomplete:selected -> function($event, suggestion, datasetName)
相关文章：