代码之家 › 专栏 › 技术社区 › Tsardines

使用从单独的JS文件获取数据填充下拉列表

jquery-ui-autocomplete autocomplete rest jquery javascript

Tsardines · 技术社区 · 7 年前

我在一个单独的文件中有一些自动完成下拉列表的代码, index.js ,和我不是很精通JS,我不知道我要做什么来“连接”文件和引用部门的GET请求。

import "jquery";
import "jquery-autocomplete/jquery.autocomplete.css";
import "jquery-autocomplete/jquery.autocomplete.js";

function loadCombobox() {
    let depts = {
        "t1": "1",
        "t2": "2"
    } // added this as a test

    let deptsArray = $.map(depts, function(value, key) {
        return {
            value: value,
            data: key
        };
    })
    console.log(deptsArray);

    $('#combobox').autocomplete({
        source: deptsArray
    }).on("click", function() {
        console.log("combobox clicked") // works
    });
}

loadCombobox();

数据-请求.js

import axios from "axios";

const baseUrl = siteAbsoluteUrl;
const deptList = "Department List";

async function makeGetRequest(url) {
  const response = await axios.get(url, getRequestConfig);
  const { results, __next } = response.data.d;
  return { results, __next };
}

// gives back an array containing all departments, without duplicates
export async function makeDepartmentsRequest() {
  const { results } = await makeGetRequest(
    `${baseUrl}/getbytitle('${deptBPList}')/fields?$filter=EntityPropertyName eq 'Department'`
  );
  return results[0].Choices.results;
}

<input type="text" id="combobox" placeholder="Browse departments">

慰问:

0 回复 | 直到 7 年前

Mohrn 7 年前

像这样的事情会是最终的结果(请注意,我不知道是什么 makeDepartmentsRequest 回报还是什么 #combobox

import { makeDepartmentsRequest } from "path-to/data-request";

function loadCombobox() {
  makeDepartmentsRequest.then(choices => {
    const source = $.map(depts, function(value, key) {
      return {
        value: value,
        data: key
      };
    });
    $("#combobox")
      .autocomplete({
        source
      })
      .on("click", function() {
        console.log("combobox clicked"); // works
      });
  });
}

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

1 年前

user28928120 · 如何在jquery中选择所有类?

1 年前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

1 年前