使用远程数据库提前输入并动态加载下拉列表

Posted 2023-02-24

【中文标题】使用远程数据库提前输入并动态加载下拉列表

【英文标题】：Typeahead with remote database and dynamically load a dropdown

【发布时间】：2014-07-19 00:12:11

【问题描述】：

请帮我解决这个问题！！ ..根据在文本框中键入的值使用twitter bootstrap typeahead提供自动建议..根据从bootstrap中显示的建议中选择的项目，标签会在文本框下方动态显示地址和电话号码（已经在数组中）和根据 company_id 加载下拉菜单。

主要是我是结构体，可以获取数组关联的 id 和值的

我的html是

<input class=" half" type="text" name="company_name" id="company_name" size="30" />

jscript 是

$('#company_name').typeahead(
    source: function(typeahead, query) 
        $.ajax(
            url: 'includes/get_company_details.php',
            type: 'GET',
            datatype: 'JSON',
            async: false,
            data: 'q=' + query,
            success: function(result) 
                console.log(result);
                var convert = JSON.parse(result);
                typeahead.process(convert);
            
        );
    
);

我的 php 文件

while($row = mysql_fetch_array( $rsd ))    
    $arr[] =array(
        'company_name' => $row[1],
        'company_id' => $row[0],
        'company_reg_addr_line1' => $row[2],
        'company_reg_addr_line2' => $row[3],
        'company_reg_city' => $row[4],
        'company_reg_city_id' => $row[10],
        'company_reg_pincode' => $row[5],
        'company_billing_addr_line1' => $row[6],
        'company_billing_addr_line2' => $row[7],
        'company_billing_city' => $row[8],
        'company_billing_city_id' => $row[11],
        'company_billing_pincode' => $row[9],
        'company_phone_number' => $row[12]
    );
  

$convert_name = json_encode($arr);

echo $convert_name;  

我得到的数组是

[
    
        "company_name": "vinod company ",
        "company_id": "2",
        "company_reg_addr_line1": "first line",
        "company_reg_addr_line2": "second line",
        "company_reg_city": "66",
        "company_reg_city_id": "www.vinodproduction.com",
        "company_reg_pincode": "122122",
        "company_billing_addr_line1": "third line",
        "company_billing_addr_line2": "fourth line",
        "company_billing_city": "67",
        "company_billing_city_id": "909099009",
        "company_billing_pincode": "121212",
        "company_phone_number": "1"
    ,
    
        "company_name": "Vignesh",
        "company_id": "4",
        "company_reg_addr_line1": "iji",
        "company_reg_addr_line2": "ij",
        "company_reg_city": "83",
        "company_reg_city_id": "j",
        "company_reg_pincode": "0",
        "company_billing_addr_line1": "ji",
        "company_billing_addr_line2": "j",
        "company_billing_city": "83",
        "company_billing_city_id": "hjh",
        "company_billing_pincode": "0",
        "company_phone_number": "1"
    
]

如果我像 ["kumar productions","vinod company"," vignesh Mercer"] 更改数组，则预输入工作正常 但我需要通过数组本身发送地址！！！

所以我更改了我在下面提到的数组。前面的类型本身不起作用。

["company_name":"vinod company ","company_id":"2","company_reg_addr_line1":"first line","company_reg_addr_line2":"second line","company_reg_city":"66","company_reg_city_id":"www.vinodproduction.com","company_reg_pincode":"122122","company_billing_addr_line1":"third line","company_billing_addr_line2":"fourth line","company_billing_city":"67","company_billing_city_id":"909099009","company_billing_pincode":"121212","company_phone_number":"1","company_name":"Vignesh","company_id":"4","company_reg_addr_line1":"iji","company_reg_addr_line2":"ij","company_reg_city":"83","company_reg_city_id":"j","company_reg_pincode":"0","company_billing_addr_line1":"ji","company_billing_addr_line2":"j","company_billing_city":"83","company_billing_city_id":"hjh","company_billing_pincode":"0","company_phone_number":"1"] 

【问题讨论】：

到底是什么问题？也许您不需要JSON.parse 结果，因为您已经在 ajax 选项中将数据指定为 JSON。

确切的问题是需要在自动提示中选择后在文本框下方显示地址。

根据您使用的引导程序版本，这有点棘手，因为版本 3 已经放弃了对预先输入的支持，并且鼓励您使用 Twitter tosbourn.com/… 提供的单独库，否则请查看文档在这里getbootstrap.com/2.3.2/javascript.html#typeahead

【参考方案1】：

您好，试试你的 typeahead 数组，如下所示：

来源：

[
   ID: 1, Name: 'Toronto' ,  ID: 2, Name: 'Montreal' ,
   ID: 3, Name: 'New York' , ID: 4,Name: 'Buffalo' ,
   ID: 5, Name: 'Boston' ,  ID: 6, Name: 'Columbus' ,
   ID: 7, Name: 'Dallas' ,  ID: 8, Name: 'Vancouver',
   ID:9, Name: 'Seattle' ,ID: 10, Name:'Los Angeles' 
]

display:'Name', val:'ID'

选择特定公司后，您可以从文本框中获取相应的公司 ID，并使用所选公司 ID 执行获取公司详细信息的逻辑。