Question

我试图通过自动完成表单将json中返回的数据解析为表单字段，我已经能够使自动完成部分正常工作。

jQuery(document).ready(function() {

var autocompleteArray = new Array();

jQuery("#business-name").keyup(function() {

    myVar = jQuery(this).val();

    jQuery.ajax({
        url: '<API_URL>',
        beforeSend: function(xhr) { 
            xhr.setRequestHeader("Authorization", "<AUTHORIZATION_TOKEN>"); 
        },
        crossDomain: true,
        dataType: 'json',
        type: 'get',
        data: {"q":myVar,"items_per_page":5},
        success: function(data) {
            // Process data here to autofill form input elements with json reponse.

           console.log(autocompleteArray); // View the Array in console

           autocompleteArray.length = 0; // EMPTY ARRAY 

            jQuery(data.items).each(function(index, value) {
      //          console.log(value.title); //entry into json
                autocompleteArray.push(value.title);
            });

            jQuery("#business-name").autocomplete({
                source: autocompleteArray
            });
        },
         error: function (jqXHR, exception) {
            var msg = '';
                if (jqXHR.status === 0) {
                    console.log('Unable to Establish Connection');
                } else if (jqXHR.status == 404) {
                    console.log('Requested Page Not Found [404]');
                } else if (jqXHR.status == 500) {
                    console.log('Internal Server Error [500]');
                } else if (exception === 'parsererror') {
                    console.log('Requested JSON Parse Failure');
                } else if (exception === 'timeout') {
                    console.log('Time Out Error');
                } else if (exception === 'abort') {
                    console.log('Ajax Request Aborted');
                } else {
                    console.log('Uncaught Error' + jqXHR.responseText);
                }
         }
    });

});

});

因此，当用户键入公司名称时，表单提供5个自动完成选项，我现在要做的是为返回的每个选项创建一个on click动作，它将从数据库中获取数据并填写表单。

我的问题是，我应该在keyup数据成功功能中的哪里插入自动填充代码？哪种语法最适合我？

有一段时间没有在jQuery上工作了，所以我目前正在为此而苦苦挣扎。

这就是我的想法...

 jQuery(document).on('click', '.ui-menu-item', function(){
    var coMpany = jQuery(this).val();
     value.coMpany.address1 // <<<<<<<< push this value to form address1
     value.coMpany.postcode // <<<<<<<< push this value to form postcode
                // and so on and so on
 });

（如何将（数据）传递到上面并使用它来填写表格）

我几乎可以使用此代码，但我的问题是代码记录了所有选择的项目-我只想获取所选项目的数据。

jQuery(document).on('click', '.ui-menu-item', function(){
   jQuery(data.items).each(function(key, value) {
    if (jQuery(".ui-menu-item").val() === value.title) {
  // RUN THIS CODE FOR SELECTED ITEM
          console.log(value.title);
          console.log(value.address.address_line_1);
  // PROBLEM * CODE LOGS ALL ITEMS IN ".ui-menu-item" CLASSES (I ONLY WANT IT TO LOG THE ONE I CLICK ON)
      }
   });
});

Answer 1

您可能想尝试这样使用。

$(document).on('click', '.what-ever-id-class-the-result-has', function(){ // codes after clicking })

从Ajax JSON数据jQuery自动填充表单

1 个答案: