猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

动态选择框未填充类型在 Jquery onchange 后正确填充前置输入文本

我在我的项目上使用Twitter TypeAhead插件，我想修改我的脚本以正确填充输入文本。我发现了类似的问题，但不幸的是，我没有得到解决这个问题的正确方法：

  1. 动态填充 Twitter Bootstrap Typeahead

  2. 根据另一个选择框填充选择框

  3. 在选择另一个选择框时填充选择框

根据上面的描述和参考，我创建了一个html页面，显示我的疑问：http://testsitex2019.000webhostapp.com/

首先，我将显示调用（产品）的MySql表，其中包含填充到输入文本中的记录：

id | categoryFK (Foreing Key) | ProductName   | image

--------------------------------------------------------

01 | 1 (Shoes)                | Adidas Shoes  | img_01

02 | 1 (Shoes)                | Nike Shoes    | img_02

03 | 1 (Shoes)                | Red Tenis     | img_03

04 | 2 (Clothes)              | Black Jacket  | img_04

05 | 2 (Clothes)              | Blu T-shirt   | img_05

现在，我将显示显示的html代码：

  1. 用 php 代码填充的选择框 （#category);

  2. 使用 TypeAhead 插件填充的输入文本（#products);

  3. 以及一个 div （#image），当用户在输入文本中选择一个选项时显示一个值（#products）。

<!DOCTYPE html>

<html>

<head>


    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta charset="utf-8">


<!-- CSS library -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">


<!-- jQuery library -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>


</head>

<body>


<div class="container" style="max-width:1230px;">

<h1>DYNAMIC BOOTSTRAP TWITTER TYPEAHEAD</h1>

<hr>

<br>

<div class="row">


<?php 

    // Include the database config file 

    include_once 'dbConfig.php'; 


    // Fetch all the category data 

    $query = "SELECT * FROM categories ORDER BY category ASC"; 

    $result = $db->query($query); 

?>


汪汪一只猫
浏览 101回答 1
1回答

慕工程0101907

经过一些调整，我设法找到了解决方案。我保留了变量“list”，并在Typeahead的afterSelect事件中进行了调整，其中在输入文本#products中选择一个选项后，afterSelect事件将与所选项目相关的值发送到div #image。这个解决方案在这里可以看到有效。下面，Ajax 和 TypeAhead 脚本进行了调整，现在也可以正常工作。调整是在 Ajax 成功和 TypeAhead afterSelect 事件中进行的：&nbsp; &nbsp; &nbsp; &nbsp; var products;&nbsp; &nbsp; &nbsp; &nbsp; var list = {}; // object&nbsp; &nbsp; &nbsp; &nbsp; $ ( function ()&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#categoryFK').on('change', function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var queryID = $(this).val();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url:"fetch.php",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; method:"POST",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; category: queryID&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dataType:"json",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success:function(data)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {/* The adjust was made here on Ajax success */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(data);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#products").val ('');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; products = data;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#products').typeahead({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; source: function ( query, result )&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; result ( $.map(products, function (item)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return item.productName;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* The adjust was made here on afterSelect event */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; afterSelect: function(data) {&nbsp; &nbsp; &nbsp; &nbsp;$.each(products, function(idx, item){&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; list[item.productName] = item.image;&nbsp; &nbsp;});&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;var img = list[data];&nbsp;&nbsp;&nbsp; &nbsp;$('#image').html(img);&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; });最后，这就是我发现的解决问题的方法。如果有人在上面的代码中建议进行一些优化，那就太好了。谢谢。
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

PHP
php如何把参数放在Http Request Heade？？？？ 1 回答