bugfix> javascript > 投稿

axiosでオートコンプリートフォームを作成しようとしましたが、レールとフォーム間でデータを共有する方法が見つかりません

ここに私のフォームがあります:

<div class="row">
  <div class="col s12">
    <div class="row">
      <div class="input-field col s12">
        <i class="material-icons prefix">textsms</i>
        <input type="text" id="autocomplete-input" class="autocomplete" onkeyup="valueChange(this);">
        <label for="autocomplete-input">Autocomplete</label>
      </div>
    </div>
  </div>
</div>

ここに私のjavascriptがあります:

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('.autocomplete');
        var instances = M.Autocomplete.init(elems, null);
    });
    function valueChange(elem) {
        var instance = M.Autocomplete.getInstance(elem);
        console.log("search for " + elem.value);
        axios.post("<%= test_autocomplete_search_path %>", {
            search: elem.value,
            authenticity_token: '<%= form_authenticity_token %>',
        })
            .then(function (response) {
                instance.updateData(response.data.nom_commune);
                console.log(response.data.nom_commune);
            })
            .catch(function (error) {
                alert(error);
            });
    };
</script>

ここに私のルビーがあります:

def autocomplete_search
    towns = Town.select(:nom_commune).where("nom_commune ILIKE ?", "%#{params[:search]}%")
    render :json => towns.map  { |town| {
        name: town.nom_commune,
        placeholder: nil
      }
    }

この方法でフォーマットされた要素を除き、問題はオートコンプリートです:

data: {
        "Apple": null,
        "Microsoft": null,
        "Google": 'https://placehold.it/250x250'
      },

そして、私はそれを「json」の方法でフォーマットしました 私はループしてCPU時間を無駄に変えたくないのですが、彼らは1 /サーバーに適切にプッシュするか、2 /クライアント側で適切に取得するための素晴らしい方法ですか?

ありがとう

グレッグ

回答 1 件
  • 答えは:

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var elems = document.querySelectorAll('.autocomplete');
            var instances = M.Autocomplete.init(elems, {});
        });
        function valueChange(elem) {
            var instance = M.Autocomplete.getInstance(elem);
            console.log("search for " + elem.value);
            axios.post("<%= test_autocomplete_search_path %>", {
                search: elem.value,
                authenticity_token: '<%= form_authenticity_token %>',
            })
            .then(function (response) {
                var map = new Object();
                for (bcl = 0; bcl < response.data.length; bcl ++) {
                    map[response.data[bcl].town] = null;
                }
                if (response.data.length > 0) {
                    console.log(map);
                    instance.updateData(map);
                }
            })
            .catch(function (error) {
                alert(error);
            });
        };
    </script>
    
    

あなたの答え