Question

经过研究，我无法解决问题。我正在使用twitter-typeahead，它没有显示结果，但是当我检查网络中的响应时，它显示了结果。即使查询中有结果，我的打字也不显示结果可能是什么原因。

HTML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical">

<androidx.cardview.widget.CardView
    android:id="@+id/first"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/guideline"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">


        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginTop="15dp"
            android:layout_marginEnd="8dp"
            android:layout_marginBottom="8dp"
            android:background="@drawable/ic_launcher_background"
            android:scaleType="center"
            android:src="@drawable/ic_launcher_background"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="@+id/guideline1"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="1.0" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guideline1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"

            app:layout_constraintGuide_begin="20dp"
            app:layout_constraintGuide_percent="0.65" />

        <TextView
            android:id="@+id/id_earning_txt1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="19dp"
            android:layout_marginTop="34dp"
            android:layout_marginEnd="44dp"
            android:layout_marginBottom="11dp"
            android:text="$0.00"
            android:textColor="#ff565659"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/guideline1"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"

            android:layout_height="wrap_content"
            android:layout_marginStart="17dp"
            android:layout_marginTop="15dp"
            android:layout_marginEnd="29dp"
            android:maxLines="1"
            android:text="Earning"
            android:textAllCaps="true"
            android:textColor="#ff565659"
            android:textSize="12sp"
            app:layout_constraintEnd_toStartOf="@+id/guideline1"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />


    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.cardview.widget.CardView>

<androidx.cardview.widget.CardView
    android:id="@+id/second"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="@+id/guideline2"
    app:layout_constraintTop_toTopOf="@+id/first">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintTop_toTopOf="parent">


        <ImageView
            android:id="@+id/imageView8"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_marginTop="15dp"
            android:background="@drawable/ic_launcher_background"
            android:scaleType="center"
            android:src="@drawable/ic_launcher_background"
            app:layout_constraintStart_toStartOf="@+id/guideline3"
            app:layout_constraintTop_toTopOf="parent" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guideline3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"

            app:layout_constraintGuide_begin="20dp"
            app:layout_constraintGuide_percent="0.65" />

        <TextView
            android:id="@+id/id_earning_txt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="19dp"
            android:layout_marginTop="34dp"
            android:layout_marginEnd="44dp"
            android:layout_marginBottom="11dp"
            android:text="$0.00"
            android:textColor="#ff565659"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/guideline3"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/textView59"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="17dp"
            android:layout_marginTop="15dp"
            android:layout_marginEnd="29dp"
            android:maxLines="1"
            android:text="Earning"
            android:textAllCaps="true"
            android:textColor="#ff565659"
            android:textSize="12sp"
            app:layout_constraintEnd_toStartOf="@+id/guideline3"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />


    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.cardview.widget.CardView>

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.45" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.55" />


</androidx.constraintlayout.widget.ConstraintLayout>

JavaScript

<input class="form-control typeahead" type="text" name="variant"
                                    placeholder="Search by BRNO,variant ..." />

控制器

$(document).ready(function(){

    var Variants = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.whitespace,
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: {
            url: '/sales/br-number/search?query=%QUERY%',
            wildcard: '%QUERY%',
            cache: false,
        },
    });

    $('.typeahead').typeahead(null, {
        hint: true,
        highlight: true,
        source: Variants,
        display: function(data) {
            return data.br_no+' '+data.variants_name.toUpperCase()+' '+data.case_bottles.quantities;
        },
        templates: {
            empty: [
            '<div class="empty-message">',
                'No Results',
            '</div>'
            ].join('\n'),
            suggestion: function(data) {
                return '<p><strong>' + data.br_no + '</strong> '+ data.variants_name +' <strong>' + data.case_bottles.quantities + '</strong> </p>';
            }
        }
    });

});

响应截图：

有人可以提出解决方案吗？

Answer 1

如果网络正在返回内容，则可能很简单，因为您没有以视图所需的格式返回数据。 IE（如果这是视图的一部分），则您希望将整个流作为Laravel视图发送：

$variants = Variant::with('case_bottles', 'product')
    ->where('br_no', 'LIKE', "%$query%")
    ->get();

return view('something', compact('variants'));

由于这是通过异步请求返回的，所以我认为您可能只需要对其进行字符串化或对数据进行json_encode以便正确传输。也许在获得$variants之后，类似：

return json_encode($variants));

然后只记得在必要时在typeahead函数内部进行解码。

Answer 2

计算您的评论

实际上，当我查看网络响应时，

此问题不适合标签“ laravel”和“雄辩”。它更接近标记“ javascript”和标签“ jquery”，因为 typeahead.js是jQuery插件。

您的查询

return $variants = Variant::with('case_bottles', 'product') ->where('br_no', 'LIKE', "%$query%") ->get();

返回集合对象，但返回JS代码

display: function(data) { return data.br_no+' '+data.variants_name.toUpperCase()+' '+data.case_bottles.quantities; }

看起来还没准备好提到数据类型。

因此，请仔细阅读@watercayman的2条建议，并一起使用

1） return json_encode($variants));

2）

记住要在typeahead函数中解码（json数据）

即使查询返回结果，Twitter-typeahead也不会显示任何结果

2 个答案: