AngularJS 1.2搜索#及含#字符无结果，页面无反馈问题求助

嘿，我之前在AngularJS 1.2项目里也踩过这个坑，输入#或者带#的内容时搜索完全没反应，既不返回结果也不触发“未找到”提示，大概率是这两个核心原因导致的，给你一步步解决的思路：

1. 先排查是不是哈希路由干扰了搜索 #

AngularJS 1.2默认用哈希路由（就是URL里的#），当你在搜索栏输入#的时候，浏览器会误以为你要跳转到某个锚点路由，直接拦截了你的搜索请求，根本没把内容传给搜索逻辑。

解决办法： #

方案一：拦截路由跳转，手动触发搜索

监听$locationChangeStart事件，判断如果是搜索输入导致的哈希变化，就阻止路由跳转，手动执行搜索：

angular.module('yourApp').controller('SearchCtrl', function($scope, $http, $rootScope) {
  $scope.searchQuery = '';
  $scope.results = [];
  $scope.showNoResults = false;

  // 监听路由变化，拦截搜索相关的哈希跳转
  $rootScope.$on('$locationChangeStart', function(event, newUrl, oldUrl) {
    // 检查是不是搜索框输入的内容导致的哈希变化
    if ($scope.searchQuery && newUrl.indexOf('#' + $scope.searchQuery) !== -1) {
      event.preventDefault(); // 阻止默认路由跳转
      $scope.performSearch(); // 手动触发搜索
    }
  });

  $scope.performSearch = function() {
    // 这里是你的搜索逻辑
    var encodedQuery = encodeURIComponent($scope.searchQuery);
    $http.get('/api/items?q=' + encodedQuery)
      .then(function(res) {
        $scope.results = res.data;
        $scope.showNoResults = res.data.length === 0;
      })
      .catch(function() {
        // 请求失败也可以触发未找到提示
        $scope.showNoResults = true;
      });
  };
});

方案二：改用HTML5模式（需要服务器配合）

如果你的项目允许，可以关掉哈希路由，改用HTML5模式，这样URL里不会有#，自然就不会和搜索内容冲突了：

angular.module('yourApp').config(function($locationProvider) {
  $locationProvider.html5Mode(true);
});

不过这个方案需要服务器配置支持，比如Apache要加重写规则，把所有请求都指向index.html，否则刷新页面会404。

2. 检查API请求的URL编码问题 #

就算路由没干扰，直接把带#的搜索词拼到API请求URL里也会出问题——因为#在URL里是锚点标识符，浏览器会把#后面的内容当成页面内部锚点，不会发送给服务器。比如你请求/api/search?q=#test，服务器实际收到的q参数是空的，自然返回空结果，但前端又没处理这种情况，就会一直显示当前页面。

解决办法： #

对搜索词进行URL编码，用encodeURIComponent()把#转成%23，这样服务器就能完整接收搜索内容了：

$scope.performSearch = function() {
  if (!$scope.searchQuery.trim()) return;
  // 编码搜索词，处理#等特殊字符
  var encodedQuery = encodeURIComponent($scope.searchQuery);
  $http.get('/api/items?q=' + encodedQuery)
    .then(function(res) {
      $scope.results = res.data;
      // 明确判断结果为空时触发未找到提示
      $scope.showNoResults = res.data.length === 0;
    })
    .catch(function() {
      $scope.showNoResults = true;
      $scope.results = [];
    });
};

3. 前端过滤逻辑的特殊字符处理 #

如果你的搜索是前端本地过滤（比如用ng-filter），还要检查过滤逻辑是不是把#当成了特殊字符。可以自定义过滤函数确保匹配准确：

$scope.customSearchFilter = function(item) {
  if (!$scope.searchQuery) return true;
  // 把搜索词和项目内容都转成小写，做不区分大小写的全匹配
  var query = $scope.searchQuery.toLowerCase();
  var itemContent = (item.title + ' ' + item.description).toLowerCase();
  return itemContent.indexOf(query) !== -1;
};

然后模板里用这个自定义过滤：

<div ng-repeat="item in allItems | filter:customSearchFilter">
  {{item.title}}
</div>

最后建议你先打开浏览器开发者工具的Network标签，输入#的时候看看有没有发送API请求，请求的参数是不是正确——这一步能快速定位是路由问题还是API请求的问题。

内容的提问来源于stack exchange，提问作者Animay