Question

我使用jQuery UI自动填充功能构建搜索（http://jqueryui.com/demos/autocomplete/）

我也在使用jQuery UI自动完成HTML扩展程序，因此我可以很好地设置搜索样式并根据搜索结果所在的类别显示图标。

我的问题是，当我点击看起来像这样的结果时：

(Category Icon) Pink Floyd - Category

在搜索输入栏中出现如下：

<div class="search_icons"><img src="images/ico/search_icon_rock.png" class="search_pic_radius"></div>Pink floyd<div class="autocomplete_category"> Rock</div><div class="artist_id_search">15</div><div class="artist_name_search">pink-floyd</div>

这就是我的search.php的样子：

if (isset($_GET['term'])){
    $return_arr = array();

    try {
        $conn = new PDO("mysql:host=".DB_SERVER.";port=8889;dbname=".DB_NAME, DB_USER, DB_PASSWORD);
        $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

        $stmt = $conn->prepare('SELECT url_name,name,category,id FROM artists WHERE name LIKE :term OR category LIKE :term LIMIT 10');
        $stmt->execute(array('term' => '%'.$_GET['term'].'%'));

        while($row = $stmt->fetch()) {
            if($row['category'] == '1') { $category_icon = '<div class="search_icons"><img src="images/ico/search_icon_rock.png" class="search_pic_radius"></div>'; }
            if($row['category'] == '2') { $category_icon = '<div class="search_icons"><img src="images/ico/search_icon_pop.png" class="search_pic_radius"></div>'; }

            $return_arr[] = $category_icon . $row['name'] . '<div class="autocomplete_category"> ' . $row['category'] . '</div>'. '<div class="artist_id_search" id="artist_id_search">' . $row['id'] . '</div>'. '<div class="artist_name_search" id="artist_name_search">' . $row['url_name'] . '</div>' ;

        }

    } catch(PDOException $e) {
        echo 'ERROR: ' . $e->getMessage();
    }

    echo json_encode($return_arr);
}

我想要实现的是，当点击自动填充上的内容时，它应该使用最后两个div artist_id_search和artist_name_search中的值提交表单，以便提交下一页将成为whatever.php?id=15&artist=pink-floyd

我所尝试的是使用拆分功能从搜索字符串中删除不必要的部分，但之后我最终得到了搜索字段中的id和url_name参数。真正实现了任何事情，它也没有真正可靠地改变图标名称等。

Answer 1

不是从你在JSON中创建的PHP服务返回HTML，而是应该以

的形式返回一个合适的JSON。

[
{"id":"15","name":"pink-floyd","value":"Pink Floyd"},
{...
]

然后在你的javascript中处理它：

$( "#your_input_id" ).autocomplete({
      source: "your_php_page.php",
      minLength: 2,
      select: function( event, ui ) {//callback function when you select an item
        log( ui.item ?
          "Selected: " + ui.item.value + " aka " + ui.item.id :
          "Nothing selected, input was " + this.value );
        window.location.href = 'whatever.php?id=ui.item.id&artist=ui.item.name';
      }
    });

希望你把它排序：）

Jquery自动完成自定义HTML结果

1 个答案: